Here is the DEMO which I have tried so far.
What I need is to push the text to the exact top of the div so that it matches the image top alignment.
I want Both image and the text to be align exactly like in one line, now you can see the little space on the top of the text which is not perfectly aligned to the top.
HTML
<div class="wrap">
<div class="image"><img src="" /></div>
<div class="content">Lorem ipsum</div>
</div>
CSS
.wrap{background:grey}
.image{display:table-cell; vertical-align:top}
.content{display:table-cell; vertical-align:top; font-size:24px}
http://jsfiddle.net/s38Uv/20/
You don't need display:table-cell to vertically align to top - that is default behaviour.
The reason you have a gap is that the line-height isn't exactly the same as the virtual box around the text. The difference depends on the font itself. If you are working for explorer 7 and above, you can set the text to display:inline-block, then margin-top: -0.Xem where X is an arbitrary number. You can set margin-top with pixels too, of course.
Related
I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.
I'm looking to create a style I can reuse that will create the following layout.
Place an image and float it left, then have text with or without paragraph tags that are positioned to the right of said image. The text will be aligned to the top of the image on the left.
I can achieve everything except the text isn't positioned at the top. Here is what I have so far, the text being centered and not top aligned.
<div style="overflow:auto">
<div style="float:left">
<img src="Images/img.jpg" />
</div>
<div>
<p>this is some text that is getting centered along the img height</p>
<p>Some more text... </p>
</div>
</div>
example of what this does. I need the 3 paragraphs aligned to top of image and 4th how it is already.
example http://www.spokanewastewater.org/Images/untitled.jpg
I would do 2 things for this.
On your first paragraph tag, add the styles below. This will remove the spacing that is caused by the first paragraph tag.
<p style="margin-top:0;padding-top:0"></p>
And on the image, the style below. Sometimes if you don't set a vertical align the image will be off a little. But I would need to see a JSFiddle to see how yours is rendering.
<img style="vertical-align:top">
Also, I should add that this should be done with an external CSS sheet and not inline, if possible.
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)
have a look at my code.
http://jsfiddle.net/Q8V4H/6/
The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.
I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.
here is the example image of what i want to achieve.
if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?
thank you
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
Download PC Dialer
</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;text-align:center">
<img src="download.png">
</div>
</div>
</div>
This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.
For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.
Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.
Look here: http://phrogz.net/css/vertical-align/index.html
I would like to vertically align some text and an image in a CSS box.
I tried several methods, here is the code for the last one I tried called "display:table-cell-method"
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>
Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW
The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?
vertical alignment is thoroughly misunderstood. Have you read this?
as for why the text sites at the baseline of the image, it is because the image and the text are both in the flow of the div. they will not overlap. to have the text centered too (implying it lies over the image), you will have to put the text into a div or a span and adjust its positioning (set it to relative and experiment with left and top).
Cheers
change the following
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>
You can use the background-position property.
it looks like this.
background: url(path/to/image.whatever) top; //aligns it to the top.
you can even do something like top left or top right etc.
w3schools has everything you need to know about backgrounds.
If your text is only one line high, you can set line-height to the height of your image. It will center the text vertically. Then position:absolute on your image will prevent it from disturbing the positioning of the text in the div:
<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>