0
我試圖將此圖標居中放置其div，但似乎無法做到這一點。我試過top: 50%，但那不起作用。如何將圖片水平和垂直居中
該班是ion-images，我知道我可以發送一個margin-top它，但我想知道如何正確地設置它在中間。
body {
margin: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/*-------------------HEADER*----------------*/
header {
position: relative;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(main-bg.jpg);
background-size: cover;
background-position: center;
}
.header-wrapper {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.title-wrapper {
position: relative;
width: 320px;
height: auto;
margin: 0 auto;
top: -10%;
}
.title-wrapper h1 {
text-align: center;
color: white;
letter-spacing: 5.45px;
margin-bottom: -10px;
font-size: 62px;
font-family: 'Raleway', sans-serif;
border-top: 3px solid white;
font-weight: 500;
}
.title-wrapper h3 {
text-align: center;
color: #35E2FF;
letter-spacing: 3.45px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.title-wrapper h2 {
color: white;
font-size: 50px;
margin-top: 80px;
font-family: 'Raleway', sans-serif;
}
.title-wrapper h4 {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-align: center;
font-size: 25px;
margin-bottom: 50px;
}
#download {
text-align: center;
;
}
#demo:link {
text-decoration: none;
color: white;
border: 2px solid white;
text-align: center;
padding: 20px 40px;
text-transform: uppercase;
font-size: 25px;
font-family: 'Raleway', sans-serif;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
#demo:hover {
background-color: #35E2FF;
}
/*------------------------------DESCRIPTION---------------*/
#description-wrapper {
position: relative;
width: 100%;
top: 0;
}
.desc-card {
position: relative;
width: 50%;
height: 450px;
margin: 0;
}
.desc-card.left {
float: left;
left: 0;
background-color: #000;
}
.desc-card.right {
float: right;
right: 0;
background-color: #282828;
}
#features-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#features-content h3 {
color: white;
font-family: 'Raleway', sans-serif;
letter-spacing: 3.5px;
font-weight: 500;
font-size: 32px;
}
#features-content p {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: 3.5px;
}
#features-img {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square {
width: 50%;
height: 50%;
}
.square.first {} .square.second {
background-color: #4A4A4A;
}
.square.third {
background-color: #4A4A4A;
}
.img-cont {
position: relative;
width: 100%;
height: 100%;
}
.ion-images {
/*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
}
#under-img {
font-size: 25px;
color: #35E2FF;
margin-top: -10px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<!----HEADER------>
<header>
<div class="header-bg"></div>
<div class="header-wrapper">
<div class="title-wrapper">
<h1>ATLAS</h1>
<h3>BETA</h3>
<h4>Create Professional Digital Design in any Operating System</h4>
<div id="download"><a href="#" id="demo">Download Now</a>
</div>
</div>
</div>
</header>
<div id="description-wrapper" class="clearfix">
<div class="desc-card left" id="features">
<div id="features-content">
<h3>The All In One Tool for Creative Designers In Any Operating System</h3>
<p>ATLAS provides users the best software to do what they do best. Design</p>
</div>
</div>
<div class="desc-card right" id="features-des">
<div id="features-img">
<div class="square first">
<div class="img-cont">
<div class="ion-images">
<!--Trying to center this--->
<p id="under-img">Photo Editing</p>
</div>
</div>
</div>
<div class="square second">
</div>
<div class="square third">
</div>
<div class="square fourth">
</div>
</div>
</div>
</div>
您可以在主體內創建一個容器盒，並製作'width：980px; margin：0 auto;'，或類似的東西，用於左右對齊。對於垂直對齊，您需要使用JavaScript並確保將調整大小事件添加到'window'以進行調整。 – PHPglue