I have something like this:
<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>
Obviously, as you can see here, my intention is to center the span inside that paragraph (both horizontally and vertically). The text is centered horizontally just fine, but why isn't the vertical centering not working? What's wrong here?
Thank you
http://jsfiddle.net/gxArp/
Using display:table; on p and display:table-cell; on span.
p{
text-align:center;
background-color:yellow;
height:50px;
width:100%;
display:table;
}
span{
display: table-cell;
vertical-align: middle;
}
Vertical-align aligns the content inline. It is not the CSS equivalent for the HTML attribute valign="middle".This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a td element. Please check this link http://phrogz.net/css/vertical-align/index.html on how to achieve vertical centering.
Hope this helps.
Related
I have 2 div boxes next to each other using display: inline-block.
Without content both inline-block divs are vertically aligned to top.
If both have content they also vertically align to top.
If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.
If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.
Please see jsfiddle link below
Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?
UPDATE:
In your example just add:
.content_boxes{
width: 400px;
height: 200px;
background: lightgreen;
display: inline-block;
vertical-align:top;
}
Fiddle:
http://jsfiddle.net/genwQ/1/
You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.
Example:
ul li {
display:inline-block;
vertical-align:top;
}
Demo:
http://jsfiddle.net/X3RLB/
Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.
Example:
<div id="content_cnt">
<div class="content_boxes"></div><!--
--><div class="content_boxes">dsasda</div>
</div>
Fiddle:
http://jsfiddle.net/genwQ/2/
I want to align middle div tag. I set body and html height 100% and give div property vertical-align: middle but it wont work for me. I google it, most of the example they are using 2 div tag bug in my case I have to use only one div.
body, html { height:100%}
<div style="vertical-align:middle; display:table-cell">middle</div>
Better would be if you use two DIVs:
http://jsfiddle.net/Smr2y/
But here a solution with one DIV:
http://jsfiddle.net/M7Mpm/
body, html { height:100%; display:table;}
<div style="display: table-cell; vertical-align: middle;">middle</div>
I have two float:left elements next to each other. When the parent element is too narrow to fit both texts on one line, then I want the text to go down to the next row, but each in their own "column". The parent width is flexible so I do not know what it will be.
http://jsfiddle.net/jsHCJ/1/ illustrates the problem and what I would like the solution to look like.
<div id = "page2">
<div class = "f1">
float 1
</div>
<div class = "f2">
float 2 and long
</div>
</div>
#page2 {width:110px; }
.f1{
background:pink;
float:left;
}
.f2{
background:yellow;
float:left;
}
Simple. Use display:table-cell; for both the divs.
What this will do is when the page shrinks or expands, the div will be at the same place and shall take the text to expand or shrink accordingly.
if i was you, i will use
display: table-cell
I've updated your fiddle
http://jsfiddle.net/jsHCJ/2/
You can change the css for #page 2 to like this
#page2 {
display: inline-block;
width: 150px;
}
try to add css in #page2
display: inline;
this will solve your problum
I have a series of elements that have a picture with a block underneath it containing text. Occasionally, the text becomes too long and breaks onto a second line. It looks like this:
I need to vertically align the text so it is always centered. I created a jsfiddle here to help provide an answer: http://jsfiddle.net/WDChT/
Any ideas how I can do this given my html/css?
You can use display:table-cell with vertical-align:middle:
http://jsfiddle.net/WDChT/3/
What I added:
span.redStrip {
padding:0 11px;
height:36px;
}
span.redStrip p {
vertical-align:middle;
display:table-cell;
height:36px;
padding:0;
margin:0;
}
Few things to note:
Support is lacking in older versions of IE (what else is new?)
You have <p> inside <span> which is invalid. You should wrap them in reverse: <span> inside <p>. I used your original markup for the demo.
I moved your padding to the inner element (the <p> with the vertical alignment set) and removed it from the outer element (the wrapper <span>). Once again, these elements should be reversed.
in the container box:
line-height:60px;
height:60px;
inner box:
display:inline-block;
vertical-align:middle;
http://jsfiddle.net/8QMGf/
note that inline-block doesn't work with older IEs, but the result will not be so bad
HTH
<style type='text/css'>
#span1{
background-image:url("http://www.reoiv.com/images/rss.jpg");
background-repeat:no-repeat;
cursor:pointer;
display:block;
float:left;
height:15px;
width:15px;
vertical-align:text-bottom;
}
</style>
<span id='span1'></span>觀看次數
What I would like to do is to achieve the vertical align: text-bottom effect but I am not doing it on a image element. I am doing it on an element with background-image set.
If you paste the above codes here: http://htmledit.squarefree.com/
You will see that the text failed to vertically align to bottom.
I would like to know how it can be done without adding extra html element if possible.
Many thanks to you all.
You closed the span tag before your text:
<span id='span1'></span>觀看次數
Use this:
<span id='span1'>觀看次數</span>
Hope that helps.
You can't do that with floats. You could try using display: inline-block, but browser support is sketchy.
EDIT: http://www.quirksmode.org/css/display.html
You can't get pixel perfect results. Here is a work around I've been using:
<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">觀看次數</span>
This vertically center-aligns the icon nicely with the text. padding-left works nicely with inline elements.