I have 1 Div with width 80% and i want to have Boxes in there but i want them centered every time and doesn't matter what width the outer div has.
.kachel_wrapper {
margin: auto auto;
width:80%;
background:orange;
min-height:450px;
margin-top:70px;
}
.kachel {
height:180px;
width:180px;
margin-top:20px;
float:left;
margin: auto auto;
margin-top:15px;
margin-left:10px;
background:#6e7176;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
How can i fix this problem? And get them width centered ?
Simply display the .kachel divs inline-block and set .kachel_wrapper to text-align:center;:
.kachel_wrapper {
margin: auto auto;
width: 80%;
background: orange;
min-height: 450px;
margin-top: 70px;
text-align: center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-top: 15px;
margin-left: 10px;
background: #6e7176;
display: inline-block;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
I'm not sure if you want the divs centered vertically or horizontally. If you want them centered horizontally go with #Jacob Gray's answer. If you want them centered vertically, remove float: left; from .kachel and add display: block; then to center add margin-left: auto; and margin-right: auto;:
.kachel_wrapper {
margin: auto auto;
width: 80%;
background: orange;
min-height: 450px;
margin-top: 70px;
}
.kachel {
display: block;
height: 180px;
width: 180px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 10px;
background: #6e7176;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
Related
In the above code I used margin-left: auto and margin-right: auto properties to align the image to center. I want to align this image to center but it's not working.
What is wrong with this code?
Are there any alternative methods?
#boom{
margin-top: 30%;
height: 4%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
<img src="image1.jpg" id="boom">
use text-align:center
<div id="boom">
<img src="http://www.w3schools.com/images/colorpicker.png" >
</div>
<style>
#boom{
margin-top: 30%;
width: 100%;
text-align:center;
}
#boom img{
width:50%;
}
</style>
So, I'd use flexbox.. It's becoming evermore popular.
Here's what I'd do:
.imageContainer
{
display: flex;
justify-content: center;
}
<div class="imageContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Gingerbread_House_Essex_CT.jpg">
</div>
Add display:table; into your code
#boom{
margin-top: 30%;
height: 4%;
width: 50%;
margin-left: auto;
margin-right: auto;
display:table;
}
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
I need three boxes centered and ordered horizontally. Right now I have the centered but only vertically:
Here is the CSS for the box:
.box {
margin-left: auto;
margin-right: auto;
background-color: #9FDCED;
display: block;
height: 400px;
width: 500px;
}
Any help would be greatly appreciated.
Give the .box a display: inline-block and vertical-align: top to make them be aligned next to eachother. If you surround it with a .container <div> that gets text-align: center the inline content gets horizontally centered.
.container {
text-align: center;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
.box--high {
height: 75px;
}
<div class="container">
<div class="box"></div>
<div class="box box--high"></div>
<div class="box"></div>
</div>
A great resource for horizontal and vertical centering using CSS is https://css-tricks.com/centering-css-complete-guide/
.box1 {
display: table;
margin: 0 auto;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 200px;
width: 200px;
}
<div class="box1">
<div class="box" style="background:#cc0000;"></div>
<div class="box" style="background:#cceeff;"></div>
<div class="box" style="background:#eeccff;"></div>
</div>
Just add a float:left; to the .box class. Like this
.box {
margin: 5px;
background-color: #9FDCED;
display: block;
height: 100px;
width: 100px;
padding: 5px;
float: left;
}
Working JSFiddle http://jsfiddle.net/wcvgs1zb/
So I have a div, inside that i have horizontally aligned divs, in this example just 1. Within this horizontal div are 3 divs, one aligned to the left, one middle and one right. I want the images within each of those 3 divs to be centered so it is more visually appealing.
I have tried: margin: 0 auto; but it didn't work, any ideas why this isn't working and how to get it working?
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
http://jsfiddle.net/genome314/2u695mdu/
Adding this should do the trick:
img {
display: block;
margin: 0 auto;
}
Or just align center as the other answer below stated, if you want to keep your images inline.
set text-align:center for each div that contains the logo.
#firstRow div{
text-align:center;
}
I threw in Nick Solloum's answer and found that the logos were still a little off center towards the bottom. I made all your image classes into one since they had the same values anyway. I fixed this by changing padding-top: to 4% and found it looked much cleaner to me. Here is the adjusted CSS. I hope this helps
HTML
<html>
<body>
<link rel="stylesheet" type="text/css" href='so.css'>
</body>
<div id="main">
<div id="firstRow">
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</html>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.El{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
padding-top: 4%;
}
img {
display: block;
margin: 0 auto;
}
Give text-align:center; in each div css
like:
.firEl{
text-align:center;
}
Edit
if, text don't want center then:
.elPara{
text-align:left;
}
Check your updated code here. Fiddle
Method 1
Add display block to .logo. Check here: http://jsfiddle.net/2u695mdu/4/
CSS
.logo{
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</div>
Only the image is centered.
Method 2
Add <div align="center"> before each image, as here: http://jsfiddle.net/2u695mdu/7/
Method 3
Check #ketan answer.
Method 4
Because you setted the image width, you can use, postion relative to images as here http://jsfiddle.net/2u695mdu/8/
.logo{
width: 100px;
height: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
display: block;
margin: auto;
instead of
margin:0 auto;
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle