I had a few hours of looking for the solution of this problem and now I'm gonna ask you.
So, I'd like to position a text left to an image. The image should float to the right and the text to the left but vertically aligned. I know I have to align the image to the text but it's not working. Here's my code:
CSS:
div.sale {
text-align: left;
}
div.sale img {
vertical-align: middle;
float: right;
clear: right;
}
And the other parts:
<div class="sale">
<img src="imagelink" alt="" width="150" height="150">
<span style="height: 75px;">simply text</span>
</div>
I'd be glad if you can help me!
Best regards!
You can vertically center the text by using display: table in combination with the
vertical-align: middle property
Explanation
added display: table to the outer div, establish table/table-cell relationship
added width: 100% to outer div - so it takes up the full width of the parent container
added display: table-cell to the span containing the text
Because its a table, the order of span#text and div.sale img matters, so I put text before image
apply vertical-align: middle; to the div.sale span element
Here is a working demo - http://jsbin.com/yurajijuxi/1/edit?html,output
Related
I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
There are many examples of vertically aligned text on the left of the image, but these same examples do not work if I attempt to place the text on the right side of the image.
On working example for the text on the left of the image is this: http://jsfiddle.net/rVTcv/
HTML:
<div style="height:259px;" class="how-right">
<img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
<span>JivaWay has a simple system to get you in shape in just 6 weeks. And it's so easy to follow, even people who have never exercised before can do it.</span>
</div>
CSS:
.how-right img {
float:right;
margin-left:20px;
vertical-align:middle;
}
span {
height: 259px;
display: table-cell;
vertical-align: middle;
}
If I attempt to move the text on the right by moving the float:right property of the image to the text, then I don't get the expected result.
Your approaching it wrong, simply float the image to the left and update the margin to the right side instead
http://jsfiddle.net/rVTcv/140/
.how-right img {
float: left;
margin-right: 20px;
vertical-align :middle;
}
So I have a div which looks like
<div id="socialMediaBarHomepage">
<div id="homepageNewsLink">
<img src="" alt="" class="mr_10"/>
</div>
<div id="socialMediaHeaderBar" class="fl_right">
<div id="headerMediaStayConnected" class="fl_left mr_5">
A bit of Text
</div>
<div id="headerMediaIcons" class="fl_left">
Image Image Image
</div>
<div>
So I have 1 Main div, with 2 sub divs.
1 Floating Left and 1 Floating right. Its basically a bar for my homepage.
On the left I display an icon and a newslink
On the right I display a label and social media icons.
What I am trying to do is simply vertically align middle everything in this bar, but can't even get close. Any ideas on how to get this done ?
CSS
#homepageNewsLink a, #homepageNewsLink img { float: left; }
#headerMediaIcons ul { margin: 0px;}
#socialMediaBarHomepage { display: table; }
#homepageNewsLink { display: table-cell; vertical-align: middle; }
#socialMediaHeaderBar { display: table-cell; vertical-align: middle; }
vertical-align CSS property applies only to TD tag and if I remember well some inline objects alignment (like images).
What you can try is to set explicit height of parent div and use on sub-divs margin-top and margin-bottom with value auto
You can also use display:table-cell on parent div and stick to vertical-align.
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;">
<img src="image.jpg" />
</div>
How can I get the image to align into the middle of the div?
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.
Add
text-align: center;
vertical-align: middle;
display: table-cell;
to the div's style.
Try :
.img
{
display: block;
margin-left: auto;
margin-right: auto
}
If this is your mark up then you can use line-height property for this. Like this:
.holder{
line-height:260px;
}
I'm looking to create a header like:
<div id="header>
<span class="left></span>
<span class="center"></span>
<span class="right></span>
</div>
So have a header that's all inline. the left to all the way to the left, the right is all the way to the right, and the center is in the center of the header.
The challenge is #header is fluid. Any CSS suggestions. right now the best way I can think to get this done is with a table with 3 rows.
Thanks
Try this:
http://jsfiddle.net/z7k3J/
If you adjust the spacer bar in the middle of the page, you will see that all of your "columns" stay appropriately aligned.
The key is that all of the columns' widths add up to 100% and you float them all to the left (or right, it doesn't really matter). When your widths are percentage-based, they will adjust appropriately as the parent changes size.
If you only care about the text being right/center/left (and not images, etc), you could also make all of the columns 100% width and absolutely positioned, and then just use text-alignment:
http://jsfiddle.net/h7qB8/
Is there a reason that floating the left and right spans won't work for you?
Can you re-order the HTML to be left/right/center (or right/left/center)? If so, float the columns and use margins or borders on the center to hold it off the side bars.
This would be a good start:
<div id="header" style="position:relative;width:100%;">
<div class="left" style="position:relative;width:200px;float:left;"></div>
<div class="center" style="position:relative;float:left;text-align:center;"></div>
<div class="right" style="position:relative;width:100px;float:right;"></div>
</div>
This will center everything in the middle div and keep the other 2 divs to the side. Make sure the element containing the header div is set to position:relative;width:100%; as well.
You can also use display: inline-block on the inner elements, on the outer container do a text align center, and then on .left float: left; .right float: right. This would allow you to set a width on the spans, but keep them evenly spaced from the center. See:
#header {
width: 100%;
text-align: center;
}
.left, .center, .right {
display: inline-block;
width: 100px;
border: 1px solid green;
}
.center {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
You don't mention it in your question but have it in your tag - if you're able to use CSS3 then the possibilities open up more. You can use the flex box layout: http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ or css3 columns: https://developer.mozilla.org/en/CSS3_Columns