The {margin:0 auto} can't make all the content center-placed in my case.
div.whole {
width: 620px;
overflow: auto;
border: 2px solid red;
}
div.left,
div.right {
margin: 0 auto;
float: left;
width: 300px;
height: 200px;
border: 2px solid black;
}
li {
list-style: none;
margin: 0 0;
padding 0 0 0 0;
display: inline-block;
border-bottom: 1px dashed black;
width: 100px;
}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120" />
</div>
<div class="right">
<ul>
<li>x1</li>
<li>y1</li>
</ul>
<ul>
<li>x2</li>
<li>y2</li>
</ul>
<ul>
<li>x3</li>
<li>y3</li>
</ul>
<ul>
<li>x4</li>
<li>y4</li>
</ul>
</div>
</div>
The displayed effect is as the following.
How to put the left content--img photo and the right content in the center of div.left and div.right ?
How to put the left content--img photo and the right content in the center of div.left and div.right ?With the help of shareeditflag, display: inline-block;vertical-align: middle; added into my css,the css file was changed into following:
div.whole{
width:620px;
overflow:auto;
border:2px solid red;
text-align: center;}
div.left,div.right{
display: block;
margin: 0 auto;
height: 100%;
float:left;
width:300px;
height:200px;
border:2px solid black;
vertical-align: middle;}
li{
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;
border-bottom: 1px dashed black;
width:100px;}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120"/>
</div>
<div class="right">
<ul>
<li>x1</li><li>y1</li>
</ul>
<ul>
<li>x2</li><li>y2</li>
</ul>
<ul>
<li>x3</li><li>y3</li>
</ul><ul>
<li>x4</li><li>y4</li>
</ul>
</div>
</div>
The displayed effect was changed into the following.
ALL the content were made center horizontally,
How to make the content vertically?
Centering the image in the Div you could use padding: to align. on .div-left
Centering the text content should be as simple as a text-align:centeron .div-right
there's a way to make anything centered. You don't need to know the height or width of any component, except the parent's. This involves a couple of things:
heres a fiddle example: https://jsfiddle.net/ahmadabdul3/eed1n1kj/1/
make sure the parent has an explicit height. I say this because html and body are sometimes forgotten. set their heights to 100%. The next thing is, every parent until your centered component should have some sort of height.
This is required for the centered-helper class that you will see.
The second thing is, the parent of the centered content should have text-align: center so that it can be centered horizontally.
Finally, the centered content should be set to vertical-align: middle along with the centered-helper should have height 100% so that it can help center your content vertically.
html:
<div class='parent'>
<div class='centered'>
centered
</div>
<div class='centered-helper'>
</div>
</div>
css:
.parent {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.centered {
display: inline-block;
vertical-align: middle;
}
.centered-helper {
display: inline-block;
vertical-align: middle;
height: 100%;
}
You can use margin for center align.
<head>
<style>
div {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
The text-align property will apply to images also.
So you could do this:
.left, .right {
text-align: center;
}
And this will center the image too.
jsFiddle: https://jsfiddle.net/sukritchhabra/uxve3n53/
Short way for margin is (THe first is for top and bottom the second is for left and right.
Margin:0 auto;
make sure that you give this the a child of a div .
Related
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
I want to put three images at the center of a page. In the following code, when I use float, the image jumps out of the parent div with class "centered". Is there any way that I can keep the child div inside the parent div?
HTML:
<div class="centered">
<div id="M">
<img src="images/M.png">
<img src="images/M.png">
<img src="images/M.png">
</div>
</div>
CSS:
.centered {
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
width: 1500px;
}
.centered img {
display: block;
}
#M {
float:left;
}
you have to add sudo element just after your .centered div to clear the float after it.
.centered:after{
content: "";
display:table;
clear:both;
}
If you want to center the image, give it a width and a left and right margin of auto:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
<img />
If you want to center the image inside a 1500px wide div.centered with a 3px green border, do the same:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
.centered {
margin: 0 auto;
border: 3px solid #73AD21;
width: 1500px;
}
<div class="centered">
<img />
</div>
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.