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=http://www.webdeveloper.com/forum/archive/index.php/"blah.html"><img src="images/blah.gif" alt="blah" width="26" height="23" border="0" /></a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/blah.gif" alt="blah" width="21" height="21" border="0" />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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;
}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:
.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?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:
.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?
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.Then can we see the full HTML and CSS? We can help you, we just need more information.Then can we see the full HTML and CSS? We can help you, we just need more information.
That's all the content I can show you, I'm afraid. What else do you need?To use CSS to align anything dead centre on a page:
<style>
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;}
</style>
</head><body>
<div id="tbl">
<div id="cell"><div id="ctr"><hr />
everything here is<br />dead centre on the page<hr />
</div></div>
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=http://www.webdeveloper.com/forum/archive/index.php/"blah.html"><img src="images/blah.gif" alt="blah" width="26" height="23" border="0" /></a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/blah.gif" alt="blah" width="21" height="21" border="0" />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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;
}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:
.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?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:
.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?
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.Then can we see the full HTML and CSS? We can help you, we just need more information.Then can we see the full HTML and CSS? We can help you, we just need more information.
That's all the content I can show you, I'm afraid. What else do you need?To use CSS to align anything dead centre on a page:
<style>
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;}
</style>
</head><body>
<div id="tbl">
<div id="cell"><div id="ctr"><hr />
everything here is<br />dead centre on the page<hr />
</div></div>