<img style="float: left;" width=200 height=200 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c">
<div id="t">text next to it which will be line broken!</div>
#t
{
float: left;
line-height: 200px;
background-color: red;
}
http://jsfiddle.net/s4wMF/
well... as you can see, shrinking the width will cause the text goes underline. I want to achieve something like this:
If you wish to align the text vertically in the centre of the div it would be a good idea to use the table-cell method here instead of line-height.
<div id="t"><p>text next to it which will be line broken!<p></div>
Try something like this
#t
{
float: left;
background-color: red;
width:100px;
height:200px;
display: table;
}
#t p {
display:table-cell;
vertical-align: middle
}
Get rid of line-height. This will cause it wrap around as you described.
Try
img { display: block; }
#t { vertical-align: middle; }
There are other options for vertical-align so work with the one that works best for you.
Related
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I've tried several properties like 'vertical-align' but I cant align the image with center of paragraph
HTML:
<p><img id="imgPhone" src="phone.png">00244 913 513 199</p>
CSS:
img {
float:left;
width:50px;
height:50px;
}
Demo
vertical-align doesn't work with floats.
Try this:
p,
img {
display: inline-block;
vertical-align: middle;
}
img {
width: 50px;
height: 500px;
}
In this case you can simple add:
p {
line-height: 50px;
}
you should wrap both elements in a div and use line-height. also an img tag inside a p tag is not exactly a good idea
http://jsfiddle.net/omegaiori/6zYeA/7/
I have a span with a background image, but it aligns differently without text in it, how can i have them aligned independent of the content?
For this it has to be inline-block and it has to be a css only solution.
Here is an example.
HTML:
Test
<span class="test">Blafffff</span>
<span class="test"></span>
CSS:
.test
{
display: inline-block;
line-height: 30px;
border: none;
height: 30px;
width: 120px;
text-align: center;
margin-top: -15px;
background: url("http://i.imgur.com/vYiCjoF.png") no-repeat;
}
EDIT: Thanks for the answers so far, but it has to align with the other text around it, i updated the example
You are using display: inline-block; so the span will align to the baseline, hence use vertical-align: top; to align them consistently.
Demo
.test {
/* Other properties */
vertical-align: top;
}
Alternatively, you can also use float: left; here, than you won't need vertical-align property, but than you need to make sure that you clear the floating elements.
For more information on float and clear, you can refer my answer here and here.
http://jsfiddle.net/9YUdb/2/
.test
{
display: inline-block;
float: left;
}
To align with the text around it, you'll need to give the span some content. You can do that with a :before pseudo-element. Putting it a zero-width non-breaking space will do the trick. i.e.
.test:before {
content: '\FEFF';
}
See http://jsfiddle.net/9YUdb/6/
Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}
Why is the text in this example: http://jsfiddle.net/7EYZe/ not in the vertical center?
How can I middle the text?
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
How can I display this properly?
The following css will center text in a div by using padding instead of height:
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}
That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>
Add text-align: center; and display: table-cell; to center it in middle of the box.
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}
The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.
The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
You can find a very good article here about what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.
Use line-height:200px, e.g.
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the div will be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.
This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }