Set Div Width to Content Without Inline-Block and Keep Divs Under Each Other Center Aligned

set div width to content without inline-block and keep divs under each other center aligned

on the parent div put white-space: pre-line;
on the child divs add clear : both

#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{

    display: inline-block;    
    clear: both;
    border: 1px solid grey;
    margin: 3px auto 3px auto;
    width: auto;

}

<div id="wrapper">
     <div id="div1" class="clearfix">some content here that is bigger</div>
     <div id="div2" class="clearfix">some content here</div>
</div>

http://jsfiddle.net/judsonmusic/8HCWp/

set div width to content without inline-block and keep divs under each other center aligned

on the parent div put white-space: pre-line;
on the child divs add clear : both

#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{

    display: inline-block;    
    clear: both;
    border: 1px solid grey;
    margin: 3px auto 3px auto;
    width: auto;

}

<div id="wrapper">
     <div id="div1" class="clearfix">some content here that is bigger</div>
     <div id="div2" class="clearfix">some content here</div>
</div>

http://jsfiddle.net/judsonmusic/8HCWp/

set div width to content without inline-block

Working jsFiddle Demo

Consider the following markup:

<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>

Float and clear all, here is the CSS:

.text {
    background: yellow;
    float: left;
    margin-bottom: 3px;
    clear: both;
}

3 Divs equal width centered within Div (Clean without Floats)

If you want to consider inline-block no need to specify margin. You simply need to set the width and center the elements.

#content-container {  text-align: center;  font-size:0;}#content-container > div {  display: inline-block;  height: 100px;  width: 30%;  font-size:initial;  animation:anime 2s infinite linear alternate;}

#box1 {  background-color: orange;}
#box2 {  background-color: blue;}
#box3 {  background-color: yellow;}
@keyframes anime {  from {    width:30%;  }  to {    width:20%;  }
}

<div id="content-container" class="container">  <div id="box1">    <h1>Box 1</h1>  </div>  <div id="box2">    <h1>Box 2</h1>  </div>  <div id="box3">    <h1>Box 3</h1>  </div></div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

Center align a collection of inline-block elements without centering each element

You can do this using CSS3 Media Queries by setting the width of the div based on different resolution bounding values. I've copied the css here, in case jsfiddle doesn't keep it around forever.

.img-block{
    max-width: 160px;
    max-height: 160px;
}
.div-block{
    display: inline-block;
}
.img-container{
    margin-left: auto;
    margin-right: auto;
}

@media all and (min-width:984px){
    .img-container{
        width: 985px;
    }
}

@media all and (min-width:820px) and (max-width: 984px){
    .img-container{
        width: 820px;
    }
}
@media all and (min-width:656px) and (max-width:820px){
    .img-container{
        width: 656px;
    }
}
@media all and (min-width:492px) and (max-width:656px){
    .img-container{
        width: 492px;
    }
}
@media all and (min-width:328px) and (max-width:492px){
    .img-container{
        width: 328px;
    }
}
@media all and (min-width:164px) and (max-width:328px){
    .img-container{
        width: 164px;
    }
}

Here's a modified version of the original code http://jsfiddle.net/hxHuV/9/

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

auto - CSS reference | MDN
margin - CSS reference | MDN
What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

Set Div Width to Content Without Inline-Block and Keep Divs Under Each Other Center Aligned

set div width to content without inline-block and keep divs under each other center aligned

set div width to content without inline-block and keep divs under each other center aligned

set div width to content without inline-block

3 Divs equal width centered within Div (Clean without Floats)

How to align a div to the middle (horizontally/width) of the page

Center align a collection of inline-block elements without centering each element

How can I center a div within another div?

Related Topics

Leave a reply