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.
Related
So i'm having trouble entering the element with the middle class. So the container box-block-head-yellow had a width of 100% so that it can span any container, the class middle is using display inline-block so that the container wraps around it's content you can see the markup below.
<!-- Markup for container -->
<div class="box">
<div class="box-block-head-yellow">
<div class="box-title-block middle">
<h1 class="box-title">Latest projects</h1>
</div>
</div>
</div>
So the issue i'm having is the middle container isn't centering in the middle. With the following styles on each element.
Parent element
Child element
Result of element not being entered horizontally
Adding the following CSS to your box-block-head-yellow class can solve the center alignment issue.
.box-block-head-yellow {
width: 100%;
text-align: center;
}
.middle {
display: inline-block;
}
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.
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
Why does text-align center text and images?
CSS:
#SupplierContainer {
width: 100%;
margin: 0 auto;
background-color: Blue;
}
#SupplierContainerContentHolder {
background-color: Yellow;
text-align: center;
}
HTML:
<div id="SupplierContainer">
<div id="SupplierContainerContentHolder">
<img src="~/Shared/Suppliers/Default" alt="Suppliers: [name removed]." />
<br />
<p>View a complete list of our Suppliers.</p>
</div>
</div>
From W3,
This property describes how inline-level content of a block container is aligned.
Since <img> is an inline-block element, this property applies to <img> as well.
Have a look at the <img> tag, where it is stated :
The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.
Because text-align is used to align inline elements (not just text) inside the content area of an element. If you want the image not to be affected by the "text-align", float it then:
#SupplierContainerContentHolder img { float:left }
If you want to place the image at left/right then you may use float, i.e.
#SupplierContainerContentHolder img{
float:left;
}
Example.
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;
}