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.
Related
Just curious:
I have a very simple webpage. I am toying with css files to make it look different.
Especially various divs:
<div align="center">
Apparently, this align="center" cannot, should not, be put in the css file.
I can set the width, background, text style etc.
Why is align not allowed in css?
Because align= is an HTML attribute (an old one) and doesn't have anything to do with CSS.
CSS properties for centering things are different based on the display property of the element being centered.
display: block elements are centered using a left and right margin set to auto. Note that a width must be supplied or it won’t work.
display: inline-block elements are centered by having the element’s parent set to text-align: center (which will center all inline and inline-block children).
/* block level element */
.aaa {
width: 50px;
height: 50px;
margin: 0 auto; /* this centers with width */
background: red;
}
<div class="aaa"></div>
and
/* inline-block or inline elements */
.parent {
text-align: center;
}
<div class="parent">
<h3>I’m a title that’s centered</h3>
</div>
There is also flexbox, but given the nature of your question it’s probably too confusing for you right now.
In CSS, you can align something by placing it inside a div. Then you have to use "text-align" in CSS. Here's an example
<html>
<div id="center">
<p>I'm in the center</p>
</div>
<style>
#center{
text-align:center;
}
</style>
</html>
That's all you have to do! (hope this helped)
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
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.
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
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;
}