1
私は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>任意の助けいただければ幸いです！ありがとう！
あなたは、水平または垂直方向に中央揃えにしたいですか？ –
それを水平に中心にします。 –
それはそれを解決しましたが、私は 'フロート'とは言わなかったので、おそらくポップアップしませんでした。ヘッドアップをありがとう！ –