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)
Related
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;
I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
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.
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.
I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.