在CSS中居中放置一个框

我在Chrome中创建了一个非常基本的着陆页，并且我很想让我的框（圆圈）相对于页面居中。我已经尝试了一些其他线程中的几个例子，但它似乎并没有工作。在CSS中居中放置一个框

@import url(http://fonts.googleapis.com/css?family=Merriweather); 
 
@import url(https://fonts.googleapis.com/css?family=PT+Sans); 
 

 
/* closest I could get to Myraid Pro*/ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: PT Sans, 'Merriweather', serif; 
 
    padding-top: 200px; 
 
    text-align: center; 
 
    margin: auto; 
 
    background-image: url("#"); 
 
    /* the above image is hidden for privacy*/ 
 
    background-repeat: no-repeat; 
 
    background-position: top center; 
 
    background-attachment: relative; 
 
} 
 

 
aside { 
 
    font-size: 150%; 
 
    /* memic welcome header */ 
 
} 
 

 
a { 
 
    /* link color for welcome header */ 
 
    color: #00599C; 
 
    text-decoration: none; 
 
} 
 

 
.box { 
 
    padding: 2em; 
 
    border: 8px solid #ccc; 
 
    border-radius: 100%; 
 
    display: block; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
    float: left; 
 
    left: 5%; 
 
    margin: 5px; 
 
    /*-1px 0 0 -1px; (alternative)*/ 
 
    color: black; 
 
    background: linear-gradient(white, white 50%, #00599C 50%, #00599C); 
 
    background-size: 100% 205%; 
 
    transition: all 0.2s ease; 
 
    animation: down-bump 0.4s ease; 
 
} 
 

 
.box h2 { 
 
    /* description of each reference */ 
 
    font-weight: 400; 
 
    letter-spacing: -1.5px; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
} 
 

 
.underwriting { 
 
    font-size: 150%; 
 
} 
 

 
.IT { 
 
    font-size: 150%; 
 
} 
 

 
.claims { 
 
    font-size: 150%; 
 
} 
 

 
.hr { 
 
    font-size: 150%; 
 
} 
 

 
.box h3 { 
 
    /*updated date */ 
 
    font: 0.8em "Lucida Grande", serif; 
 
    text-align: center; 
 
} 
 

 
.box:hover { 
 
    background-position: 100% 100%; 
 
    animation: up-bump 0.4s ease; 
 
} 
 

 
.box:hover h2 { 
 
    color: #C8C8CA; 
 
    /* navy blue */ 
 
} 
 

 
.box:hover h2 span { 
 
    color: white; 
 
} 
 

 
.box:hover h3 { 
 
    color: #ECECED; 
 
    /* gray */ 
 
} 
 

 

 
/* fun little animation to provide that interactive feel */ 
 

 
@keyframes up-bump { 
 
    0% { 
 
    padding-top: 2em; 
 
    } 
 
    50% { 
 
    padding-top: 1.5em; 
 
    } 
 
    100% { 
 
    padding-top: 2em; 
 
    } 
 
} 
 

 
@keyframes down-bump { 
 
    0% { 
 
    padding-top: 2em; 
 
    } 
 
    50% { 
 
    padding-top: 2.5em; 
 
    } 
 
    100% { 
 
    padding-top: 2em; 
 
    } 
 
}

<div> 
 
    <!-- this is an attempt to align the boxes center relative --> 
 
    <a href="#" class="box"> 
 
    <h2><span class="underwriting">Underwriting</span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 8/1/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="IT">Information Technology</span> <p>How-to's & Troubleshooting</p></h2> 
 
    <h3>Updated - 7/24/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="claims">Claims</span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 7/28/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="hr">Premium Audit & Billing </span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 7/21/2016</h3> 
 
    </a> 
 
</div>

任何帮助将不胜感激！谢谢！

来源

2016-08-02 Daniel Moler

要水平或垂直居中？ –

水平居中 –

是的，这将解决它，可能没有弹出，因为我没有提到'浮动'。感谢您的领导！ –

圆圈没有水平居中，因为您将它们左移。我建议将它们设置为display:inline-block，而不是浮动块元素。这样，圆圈将全部出现在同一条线上而不会浮动，并且它们的容器上的text-align:center将使它们水平居中。此外，我设置vertical-align:top保持其顶部彼此对齐。

我做了圆圈较小，但这只是为了这个例子。

* { 
 
    box-sizing: border-box; 
 
} 
 
div { 
 
    text-align: center; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 120px; 
 
    height: 120px; 
 
    padding: 2em; 
 
    margin: 5px; 
 
    border: 8px solid #ccc; 
 
    border-radius: 100%; 
 
    font-size: .6em; 
 
    color: black; 
 
    background: linear-gradient(white, white 50%, #00599C 50%, #00599C); 
 
    background-size: 100% 205%; 
 
    transition: all 0.2s ease; 
 
    animation: down-bump 0.4s ease; 
 
} 
 
.box h2 { 
 
    font-size: inherit; 
 
    font-weight: 400; 
 
    letter-spacing: -1.5px; 
 
    line-height: 1; 
 
    margin: 0; 
 
} 
 
.box h3 { 
 
    font-size: inherit; 
 
    font-family: "Lucida Grande", serif; 
 
    margin: 0; 
 
} 
 
.box:hover { 
 
    background-position: 100% 100%; 
 
    animation: up-bump 0.4s ease; 
 
} 
 
.box:hover h2 { 
 
    color: #C8C8CA; 
 
} 
 
.box:hover h2 span { 
 
    color: white; 
 
} 
 
.box:hover h3 { 
 
    color: #ECECED; 
 
} 
 
/* fun little animation to provide that interactive feel */ 
 

 
@keyframes up-bump { 
 
    0% { 
 
    padding-top: 2em; 
 
    } 
 
    50% { 
 
    padding-top: 1.5em; 
 
    } 
 
    100% { 
 
    padding-top: 2em; 
 
    } 
 
} 
 
@keyframes down-bump { 
 
    0% { 
 
    padding-top: 2em; 
 
    } 
 
    50% { 
 
    padding-top: 2.5em; 
 
    } 
 
    100% { 
 
    padding-top: 2em; 
 
    } 
 
}

<div> 
 
    <!-- this is an attempt to align the boxes center relative --> 
 
    <a href="#" class="box"> 
 
    <h2><span class="underwriting">Underwriting</span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 8/1/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="IT">Information Technology</span> <p>How-to's & Troubleshooting</p></h2> 
 
    <h3>Updated - 7/24/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="claims">Claims</span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 7/28/2016</h3> 
 
    </a> 
 
    <a href="#" class="box"> 
 
    <h2><span class="hr">Premium Audit & Billing </span> <p>References, Guidelines & Best Practices</p></h2> 
 
    <h3>Updated - 7/21/2016</h3> 
 
    </a> 
 
</div>

来源

2016-08-02 16:46:36 showdev

完美无瑕！我不知道为什么我没有想到内联块。 Geez louise！ –

在CSS中居中放置一个框

回答

相关问题