Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
Related
Although the heights of span and img elements are the same, they are located in different vertical positions i.e their "y" coordinates are different. What is the basic idea behind this?
The HTML code:
<p>
<span> Foo </span>
<span> Bar </span>
<img src="http://www.oriental-weaponry.co.uk/acatalog/68-06-RE-rattan-escrima-stick-1000.jpg" height="36" width="36"/>
</p>
associated CSS:
span {
width:100px;
background:blue;
font-size:30px;
color:white;
}
and the jsfiddle demo:
http://jsfiddle.net/Lcawysvs/2/
The default vertical-align for an image causes it to sit on the baseline of the text. The bottom of the image is aligned with the bottom of the letters (discounting the descenders that you might find on letters like y and g).
You can change that with, for example:
img {
vertical-align: bottom;
}
you need to set the vertical-align on the img or span because inline elements sit on the baseline by default:
span {
display:inline-block;
vertical-align: top;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
}
FIDDLE
DEMO LINK
I want to have <p> text displayed in line with the image so everything will look centered and in-line correctly.
Also when screen is shorter and text takes 2+lines (responsive), I'd like this to remain the same as well so the text doesn't jumo below the image.
How can I achieve that?
Replace <p> with <span>. Then do:
.tip span {
margin-left:10px;
}
img {
vertical-align: middle;
}
Notice that you don't need display: inline-block on your span.
DEMO REVISED
changed
.tip p {
display:inline;
margin-left:10px;
}
and added:
.tip img {
float:left;
}
inline-block to inline so that it acts in line within the parent div. float:left; to keep the image on the left side of the parent div.
Try this...This code below works!
<img src="" alt="" style="width:32px;height:32px;float:left;">
<p style="margin:0px;height:32px;max-idth:100%;float:left;overflow:auto;">TEST</p>
change the 32px to one size that suits you
the style float:left; does the thing you want here
I have a div that is display:table; - inside that div there are two display:table-cell.
one table-cell is a span holding and img,and the other is span holding text,
for some reason there is a space between the two display:table-cell that I don't want.
how can I made the table-cells be one next to each other?
here is my html:
<div class="statusCommentUser">
<span><img src="/Content/Images/contactDemo_small_image.png" class="SmallUserImg"></span>
<span>Sounds great, man!</span>
</div>
here is my css:
.statusCommentUser {
width:450px;
height:50px;
display:table;
}
.statusCommentUser span {
display: table-cell;
vertical-align: middle;
}
When you assign css rule display:table-cell to any element, it behaves as any td element of some table. So, in that case, it auto adjusts itself according to the parent width and the number of other tds in the same row, only when, you don't specify a width to this td.
That's why both your span cum TDs are taking that width.
simply assign a width to the first one, it should solve your problem.
i.e. try adding this class
.statusCommentUser span:first-child{
width:50px;
}
see the demo
Moreover, if all that you want is to position your image span and text span horizontally aligned, you can do it through many other ways i.e. change your css classes to this:
.statusCommentUser {
width:450px;
height:50px;
}
.statusCommentUser span {
float:left;
}
.statusCommentUser span:last-child{
position:relative;
top:40px;
}
see this demo
See Demo Here
Just add class to the span which contains your image and then set the width
HTML
<div class="statusCommentUser">
<span class="user"><img src="http://placehold.it/30x30/" class="SmallUserImg"></span>
<span>Sounds great, man!</span>
</div>
CSS
span.user {
width: 35px;
}
If the div is acting like a table, try adding this to .statusCommentUser:
border-collapse: collapse;
This CSS is used to remove the spacing between cells in a table.
The space comes from the newline and indentation between the two <span>s.
Try this:
<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>
What about this:
.statusCommentUser img
{
width: 100%;
height: 100%;
float: left;
}
Your image will become the total size of your cell. Also your image has to be floated to be positioned in the cell (OP example the image is not in the middle of the cell).
To prevent stretching of the image, you can make a static width of the image span. Or you can make the cell adjust automatically based on the image size. However you would have to remove the static width of your div tabel.
Manish Mishra's image used for dummy image ^^
jsFiddle
I was facing the same problem and was able to resolve by adding the property in display:table-cell element
border-spacing: 0;
Hope it solves for those still looking
It is working with this way
<td align="center">
But I want to use CSS class.
I defined class like this way but no luck
td
{
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
}
Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.
div { margin: auto; }
This will center your div.
Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.
I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it's because a div by default takes up 100% width, and as such cannot be aligned.
What you may be after is to align the inline elements inside the div (such as text) with text-align:center; otherwise you may consider setting the div to display:inline-block;
If you do go down the inline-block route then you may have to consider my favorite IE hack.
width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only
Happy Coding :)
I've to align some text in the center of the page with div tag.
div#foo { text-align:center; }
to align the text within the div or
div#foo { width:100px; margin:0 auto; }
to make the div 100px width and horizontally center it.
You could set the style of the div to be:
<div style="width: 250px; margin-left:auto; margin-right:auto;">TEXT</div>
You can also place that style in a CSS class and set the class of the div to whatever you named it.
EDIT: If you include a width for the div, it centers...
You can try <div align="center">...</div>
Simply use the following styling:
div {margin:0 auto;}