stackoom
  简体   繁体   中英

Center several divs in a parent div

 原文  2016-07-10 18:23:41  8   4    javascript/ css/ html

Question

I have some divs that I want to center in a horizontal row. I've tried everything I can think of and researched it with no avail. Here's my code.

HTML: 

<!doctype html> 
<html>
    <head>
        <title>Hello, World!</title>
        <!--references-->
        <link rel="stylesheet" type="text/css" href="styles/index.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    </head>
        <body>
            <div id="wrapper">
                <div id = "box">
                    <h1 id="head">Hello, World</h1>
                    <div id = "btn-panel">
                        <button class="btn" id="btn1">panel1</button>
                        <button class="btn" id="btn2">panel2</button>
                        <button class="btn" id="btn3">panel3</button>
                        <button class="btn" id="btn4">panel4</button>
                    </div><!--button-panel-->
                </div> <!--Box-->
                        <div id = "panel-row">
                            <div class="panel" id="p1"><p class="phead">Panel#1</p><hr></div>
                            <div class="panel" id="p2"><p class="phead">Panel#2</p><hr></div>
                            <div class="panel" id="p3"><p class="phead">Panel#3</p><hr></div>
                            <div class="panel" id="p4"><p class="phead">Panel#4</p><hr></div>
                        </div><!--panel-row-->
            </div> <!--wrapper-->
        </body>
    <script src="js/Index.js" type="text/javaScript"></script>
</html>

CSS: 

    body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300; 
   margin: 0px;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#box { 
    background-color: #EEE;
    Width: 100%;
    Height: 250px;
    margin-left: auto;
    margin-right: auto;
    Text-align: center; 
}

#head {
    padding-top: 25px;
    font-size: 20pt;
}
#btn-panel {
    width: 100%;
    height: 100px;
    margin-top: 50px;
}

.btn {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    margin-right: 20px;
}

#panel-row {
    width: 100%;
    height: 150px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.panel {
    display: inline-block;
    margin-right: 25px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid gray;
    background-color: #7FFFD4;
}
.phead {
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
}

#panel-row {
    margin-right: auto; 
    margin-left: auto;  
}

any insight would be greatly appreciated. Thanks.

4 answers

solution1
 1  2016-07-10 18:31:32

SOLUTION 1: (Recommended)

Using flexbox.

Achieving this is quite easy using flexbox, what you need to do is set display: flex; and justify-content: center; in your parent element.

CODE SNIPPET: 

 body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 0px; } html { width: 100%; height: 100%; margin: 0px; } #wrapper { width: 100%; height: 100%; } #box { background-color: #EEE; Width: 100%; Height: 250px; margin-left: auto; margin-right: auto; Text-align: center; } #head { padding-top: 25px; font-size: 20pt; } #btn-panel { width: 100%; height: 100px; margin-top: 50px; } .btn { width: 100px; height: 50px; border-radius: 5px; margin-right: 20px; } #panel-row { display: flex; justify-content: center; height: 150px; margin-top: 20px; margin-left: auto; margin-right: auto; } .panel { display: inline-block; margin-right: 25px; width: 100px; height: 100px; border-radius: 10px; border: 1px solid gray; background-color: #7FFFD4; } .phead { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; }
 <div id="wrapper"> <div id="box"> <h1 id="head">Hello, World</h1> <div id="btn-panel"> <button class="btn" id="btn1">panel1</button> <button class="btn" id="btn2">panel2</button> <button class="btn" id="btn3">panel3</button> <button class="btn" id="btn4">panel4</button> </div> <!--button-panel--> </div> <!--Box--> <div id="panel-row"> <div class="panel" id="p1"> <p class="phead">Panel#1</p> <hr> </div> <div class="panel" id="p2"> <p class="phead">Panel#2</p> <hr> </div> <div class="panel" id="p3"> <p class="phead">Panel#3</p> <hr> </div> <div class="panel" id="p4"> <p class="phead">Panel#4</p> <hr> </div> </div> <!--panel-row--> </div> <!--wrapper-->

SOLUTION 2:

Using text-center for inline-block elements.

Probably the simplest solution for your demo, which will only work with inline-block elements , is using the css property text-align: center; in your parent element and text-align: initial; in your child elements.

CODE SNIPPET: 

 body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 0px; } html { width: 100%; height: 100%; margin: 0px; } #wrapper { width: 100%; height: 100%; } #box { background-color: #EEE; Width: 100%; Height: 250px; margin-left: auto; margin-right: auto; Text-align: center; } #head { padding-top: 25px; font-size: 20pt; } #btn-panel { width: 100%; height: 100px; margin-top: 50px; } .btn { width: 100px; height: 50px; border-radius: 5px; margin-right: 20px; } #panel-row { height: 150px; margin-top: 20px; margin-left: auto; margin-right: auto; text-align: center; } .panel { text-align: initial; display: inline-block; margin-right: 25px; width: 100px; height: 100px; border-radius: 10px; border: 1px solid gray; background-color: #7FFFD4; } .phead { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; }
 <div id="wrapper"> <div id="box"> <h1 id="head">Hello, World</h1> <div id="btn-panel"> <button class="btn" id="btn1">panel1</button> <button class="btn" id="btn2">panel2</button> <button class="btn" id="btn3">panel3</button> <button class="btn" id="btn4">panel4</button> </div> <!--button-panel--> </div> <!--Box--> <div id="panel-row"> <div class="panel" id="p1"> <p class="phead">Panel#1</p> <hr> </div> <div class="panel" id="p2"> <p class="phead">Panel#2</p> <hr> </div> <div class="panel" id="p3"> <p class="phead">Panel#3</p> <hr> </div> <div class="panel" id="p4"> <p class="phead">Panel#4</p> <hr> </div> </div> <!--panel-row--> </div> <!--wrapper-->

SOLUTION 3:

Using fixed width.

In order for the margin: 0 auto; trick to work, you need to set a width to the element.

This is hard to maintain since your child elements' width can change and you would need to change the parent's width, not mentioning the responsiveness issues this can cause, which will most probably need media queries to be solved. 

 body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 0px; } html { width: 100%; height: 100%; margin: 0px; } #wrapper { width: 100%; height: 100%; } #box { background-color: #EEE; Width: 100%; Height: 250px; margin-left: auto; margin-right: auto; Text-align: center; } #head { padding-top: 25px; font-size: 20pt; } #btn-panel { width: 100%; height: 100px; margin-top: 50px; } .btn { width: 100px; height: 50px; border-radius: 5px; margin-right: 20px; } #panel-row { width: 522px; height: 150px; margin-top: 20px; margin-left: auto; margin-right: auto; } .panel { display: inline-block; margin-right: 25px; width: 100px; height: 100px; border-radius: 10px; border: 1px solid gray; background-color: #7FFFD4; } .phead { margin-top: 10px; margin-bottom: 10px; margin-left: 20px; }
 <div id="wrapper"> <div id="box"> <h1 id="head">Hello, World</h1> <div id="btn-panel"> <button class="btn" id="btn1">panel1</button> <button class="btn" id="btn2">panel2</button> <button class="btn" id="btn3">panel3</button> <button class="btn" id="btn4">panel4</button> </div> <!--button-panel--> </div> <!--Box--> <div id="panel-row"> <div class="panel" id="p1"> <p class="phead">Panel#1</p> <hr> </div> <div class="panel" id="p2"> <p class="phead">Panel#2</p> <hr> </div> <div class="panel" id="p3"> <p class="phead">Panel#3</p> <hr> </div> <div class="panel" id="p4"> <p class="phead">Panel#4</p> <hr> </div> </div> <!--panel-row--> </div> <!--wrapper-->

OBSERVATIONS:

  • The #panel-row selector is repeated in your css.
  • You do not need to add the css property width: 100% to a block level element, this is the default width.

solution2
 0  2016-07-10 18:29:52

Almost there, You must center with text-align: center; since the .panels are inline like text or spans.

#panel-row {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

solution3
 0  2016-07-10 18:31:57

#panel-row, .panel, .phead {
  text-align:center;
}

http://codepen.io/nagasai/pen/grGKWZ

solution4
 0  2016-07-10 18:38:24

You could use text-align: center on the #panel-row 

 body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 0px; } html { width: 100%; height: 100%; margin: 0px; } #wrapper { width: 100%; height: 100%; } #box { background-color: #EEE; Width: 100%; Height: 250px; margin-left: auto; margin-right: auto; Text-align: center; } #head { padding-top: 25px; font-size: 20pt; } #btn-panel { width: 100%; height: 100px; margin-top: 50px; } .btn { width: 100px; height: 50px; border-radius: 5px; margin-right: 20px; } #panel-row { width: 100%; height: 150px; margin-top: 20px; margin-left: auto; margin-right: auto; text-align: center; /* Align text inside panel row*/ } .panel { display: inline-block; margin-right: 25px; width: 100px; height: 100px; border-radius: 10px; border: 1px solid gray; background-color: #7FFFD4; } .phead { margin-top: 10px; margin-bottom: 10px; /*margin-left: 20px*/ /* this margin is messing up with centered-text alignment*/ } #panel-row { margin-right: auto; margin-left: auto; }
 <!doctype html> <html> <head> <title>Hello, World!</title> <!--references--> <link rel="stylesheet" type="text/css" href="styles/index.css" /> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> </head> <body> <div id="wrapper"> <div id = "box"> <h1 id="head">Hello, World</h1> <div id = "btn-panel"> <button class="btn" id="btn1">panel1</button> <button class="btn" id="btn2">panel2</button> <button class="btn" id="btn3">panel3</button> <button class="btn" id="btn4">panel4</button> </div><!--button-panel--> </div> <!--Box--> <div id = "panel-row"> <div class="panel" id="p1"><p class="phead">Panel#1</p><hr></div> <div class="panel" id="p2"><p class="phead">Panel#2</p><hr></div> <div class="panel" id="p3"><p class="phead">Panel#3</p><hr></div> <div class="panel" id="p4"><p class="phead">Panel#4</p><hr></div> </div><!--panel-row--> </div> <!--wrapper--> </body> <script src="js/Index.js" type="text/javaScript"></script> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Center align 2 fixed width divs side by side within parent div Center 3 div in parent div Align parent of floating divs on center Loading an image buried within several divs when the parent div is shown by a .show jQuery command center img in div with several elements How can I change the position of divs on click to the center of the parent div using jQuery? Why are the divs bigger then the parent div? Limit selectable divs in a parent div How to change styles of several child divs of a div? How to distribute several divs in a div evenly
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM