I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?
Here's the CSS:
table#body1 {
padding: 0px;
vertical-align: top;
margin-bottom: 10px;
margin-top: 5px;
}
td#images {
width: 30%;
}
td#text {
width: 70%;
padding-left: 15px;
text-align: justify;
vertical-align: top;
}
And the HTML: (all the divs are inline-block elements if that makes a difference)
<table id="body1">
<tr>
<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>
Thanks in advance for helping!
Add vertical-align: top; to td#images as well.
Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images
jsFiddle example
Related
I'm trying to make an icon fit nicely between text in HTML/CSS.
It seems like this should be possible with display:inline-block;. However this always seems to go wrong due to phantom padding:
<div style="">
<div style="display:inline-block;">Text here</div><img style="height:24px;display:inline-block" src="{{ url_for('static', filename= 'images/icon-unsorted.png' ) }}" />
</div>
As you can see the outer div becomes 25.64px high, while both its child elements are 24px high.
Moreover the image is aligned at the bottom, whereas the text is aligned to the top of the outer div.
I however want both of them to be vertically (center) aligned.
If i try to force the outer div to 24px: <div style="height:24px;">, contents remain incorrectly aligned, and the icon simply overflows below its parent.
So I suppose my question is this:
How do i make an image fit nicely inside a line of text, where the image has the same height as the text, or both are center aligned vertically?
I might try a more css oriented approach. I made a small example below.
.btnStyle {
position: relative;
display: inline-flex;
width: 110px;
height: 24px;
text-align: left;
font-family: Helvetica, sans-serif;
color: black;
background-image: url(https://extortionguild.com/images/icon-unsorted.png);
background-size: 17.5px 100%;
background-position: right center;
background-repeat: no-repeat;
margin-right: 20px;
}
table {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 20px);
font-size: 18px;
}
table td {
vertical-align: middle;
}
<div style="display:inline-block; width: 100% height: 40px;">
<div class="btnStyle"><!-- Button 1-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle"><!-- Button 2-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle" style="width: 200px;"><!-- Button 3 - wider-->
<table>
<tr>
<td>
Even More Text here
</td>
</tr>
</table>
</div>
</div>
• Using classes will also allow you to make changes to all the buttons via the btnStyle class, instead of having to change each individually.
• Tables have a "built-in" vertical-align: middle; option and it's a really simple method of aligning any cell content centered vertically. -- Documentation
• You will need to edit background image url to background-image: url(images/icon-unsorted.png); to load your image file.
development-ninja was also on the right track with "flex", but it needs to be "inline-flex" or they will try to stack. -- For inline-flex browser support info click here
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I know that similar problem have been asked and answered previously on this site, but unfortunately none of the answers have been able to help.
I need my text to vertically align in the center/ bottom of my table row. This i my css text:
h3 {
vertical-align:bottom;
font-weight: lighter;
padding-top: 0px;
background: url(images/bg3.jpg);
background-repeat: no-repeat;
background-position:left bottom;}
If your text is single line, than use line-height = height:
h3 {
height: 30px;
line-height: 30px;
display: inline-block;
}
Use align and valign properties in your table cell:
<table width="100%" border="1">
<tr>
<td height="300" align="center" valign="middle">
<h3>Hello World</h3>
</td>
</tr>
</table>
jsFiddle Demo.
From your question it seems you want to vertically align to the bottom and horizontally to the center.. if that is true you should do this:
FIDDLE
td { text-align:center; vertical-align:bottom;}
*Notice the styles need to be on the table cell and not on the inner element (h3)
good luck!
Here is the html code that makes the table:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="profile">
<img src="http://www.teleread.com/wpcontent/uploads/2009/05/image18.png" />
</div>
</td>
<td>Hello</td>
</tr>
</table>
Here is the css:
.profile img {
width: 120px;
height: 125px;
float: left;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
border: 1px #cc1212 solid;
clear: both;
}
Here is the code in action on jsfiddle:
http://jsfiddle.net/Yeqnn/
THE ISSUE: The word "Hello" is vertically centered in the right column
How do I fix this? BTW, the image has to be in the table and floated left to work with my current theme... any ideas, if so drop an answer plz.
Simply put vertical-align: top; on your <td> elements.
Demo
I'm struggling spreading fives divs evenly inside a resizeable div. I have looked at How to spread elements evenly (horizonatly)? but cant get it to work :-(
The problem seems to be that even thoug my div width is set to 20% the last element is wrapped onto the next line if the surrounding divs width is not dividable by 5.
My css is this
#exposureSummaryContainer > div { width: 20%;display: inline-block;}
and my html:
<div id="exposureSummaryContainer">
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
</div>
How do I ensure that all five elements stay on the same line?
I made this http://jsfiddle.net/GTwFb/ to illustrate my problem.
Add float:left;
#exposureSummaryContainer > div { width: 20%;display: inline-block; float:left; background:red}
DEMO
There is a whitespace you don't see, if you removed it,
<div id="exposureSummaryContainer"><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div></div>
it shall work.
This is maybe not the best looking way.. but its working
#exposureSummaryContainer { width: 100%; display: table; }
#exposureSummaryContainer > div { width: 20%;display: table-cell;}
You can edit the width to a specific size
the problem is the physical space on the markup amongs div elements when their display is inline-block, so a workaround is the following:
#exposureSummaryContainer {
white-space: nowrap;
word-spacing: -3px;
letter-spacing: -3px;
}
#exposureSummaryContainer > div {
width: 20%;
display: inline-block;
white-space: normal;
word-spacing: normal;
letter-spacing: normal;
}
I'd use the float: left; property
This works for me:
http://jsfiddle.net/GTwFb/2/
Well I would you the trick of table:
<table style="width:whateveryouwant">
<tr>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
</tr>
</table>
This works for me all the time ^_^