/    Sign up×
Community /Pin to ProfileBookmark

Vertically centering text

Copy linkTweet thisAlerts:
May 17.2005

I have a div which contains two images to the left of some text.

I want both the images and the text to sit vertically centered within the div.

How do I do this? The text just seems to sit on the baseline.

I have tried specifying height in the parent div and then the same line-height for the text div (see below), but this doesn’t seem to work.

<div class=”qCat”>
<a href=”blah.html”><img src=”images/blah.gif” alt=”blah” width=”26″ height=”23″ border=”0″ /></a>
<img src=”images/blah.gif” alt=”blah” width=”21″ height=”21″ border=”0″ />
<a href=”blah.html” class=”qNavLink”>Basics</a>
<span class=”qDescriptor”>blah blah blah</span>
</div>

______________

.qCat {
border-bottom:1px solid white;
height:15px;
}

a.qNavLink {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
line-height:15px;
vertical-align:middle;
}

a.qNavLink:hover {
text-decoration:underline;
}

.qDescriptor {
display:inline;
font-size:90%;
line-height:15px;
vertical-align:middle;
}

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienMay 17.2005 — There's pretty much no good way of doing it. This DIV you speak of, does it have a set height? If it does have a set height we could Jerry-rig something to look like vertical alignment. One of my biggest complaints against CSS is that it has nothing to vertically align whole blocks of stuff. However, you've got to ask yourself, are you wasting too much white space?

Also, try adding padding to the DIV. You won't get the DIV to be the exact height, but something close enough that people won't notice. One of the most frustrating thing for us designers to get over is that 99% of users won't even know the small design flaws we see. Anyhow, how about this css:
<i>
</i>.qCat {
border-bottom:1px solid white;
padding: 10px;
}

Just adjust the padding to your liking. Above that I can't really help you. I have no idea what the page layout is for what you're after. Can you post the full HTML and CSS or a graphic of the layout you're after?
Copy linkTweet thisAlerts:
@invisible_kidauthorMay 17.2005 — There's pretty much no good way of doing it. This DIV you speak of, does it have a set height? If it does have a set height we could Jerry-rig something to look like vertical alignment. One of my biggest complaints against CSS is that it has nothing to vertically align whole blocks of stuff. However, you've got to ask yourself, are you wasting too much white space?

Also, try adding padding to the DIV. You won't get the DIV to be the exact height, but something close enough that people won't notice. One of the most frustrating thing for us designers to get over is that 99% of users won't even know the small design flaws we see. Anyhow, how about this css:
<i>
</i>.qCat {
border-bottom:1px solid white;
padding: 10px;
}

Just adjust the padding to your liking. Above that I can't really help you. I have no idea what the page layout is for what you're after. Can you post the full HTML and CSS or a graphic of the layout you're after?[/QUOTE]

Thanks for this, but adjusting the padding-bottom of the qCat class doesn't actually have any effect.

I expect I'll have to create a separate div for the text block and give that a bottom-margin to bump it up central to the images.
Copy linkTweet thisAlerts:
@toicontienMay 17.2005 — Then can we see the full HTML and CSS? We can help you, we just need more information.
Copy linkTweet thisAlerts:
@invisible_kidauthorMay 17.2005 — Then can we see the full HTML and CSS? We can help you, we just need more information.[/QUOTE]

That's all the content I can show you, I'm afraid. What else do you need?
Copy linkTweet thisAlerts:
@felgallMay 17.2005 — To use CSS to align anything dead centre on a page:

&lt;style&gt;
body, html {height: 100%;text-align:center;}
#tbl {margin:0 auto;width:200px;text-align:left;}
* html #tbl {position: absolute; top: 50%;}
#tbl[id] {display: table; height: 100%;}
* html #cell {position: relative; top: -50%;left: -50%;}
#cell[id] {display: table-cell; vertical-align: middle;}
&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;
&lt;div id="tbl"&gt;
&lt;div id="cell"&gt;&lt;div id="ctr"&gt;&lt;hr /&gt;
everything here is&lt;br /&gt;dead centre on the page&lt;hr /&gt;
&lt;/div&gt;&lt;/div&gt;
×

Success!

Help @invisible_kid spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...