在CSS中对齐照片在中心

-1

我是一个新的HTML和我正在学习语言，但是当我试图创建此网站时，顶部照片将不会在中心对齐。我尝试过垂直对齐和填充，但运气不错。把我的代码放在下面。谢谢你的回复！在CSS中对齐照片在中心

.hudson { 
 
    color: white; 
 
    position: relative; 
 
    font-size: 60px; 
 
    top: 105px; 
 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.threeD { 
 
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); 
 
} 
 
.p1 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 70px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p2 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 80px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p3 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 90px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.coding { 
 
    align-items: center; 
 
    padding: 10px; 
 
} 
 
.paracolor { 
 
    color: skyblue; 
 
    font-size: 25px; 
 
    font-family: Orbitron; 
 
    text-align: center; 
 
} 
 
#icons { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
} 
 
#icons i { 
 
    color: white; 
 
} 
 
body { 
 
    background-image: url(PICTURES1/mountains4.jpeg); 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" /> 
 
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css"> 
 
<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="max-width:125px;max-height:125px;"> 
 
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2> 
 
<p class="paracolor p1 animated fadeInRightBig">blah blah blah</p> 
 
<p class="paracolor p2 animated fadeInLeftBig">blah blah blah</p> 
 
<p class="paracolor p3 animated fadeInRightBig">blah blah blah</p> 
 
<div id="icons"> 
 
    <a href="https://www.instagram.com/hreamer/"><i class="fa fa-instagram fa-4x"></i></a> 
 
    <a href="mailto:[email protected]"><i class="fa fa-envelope-o fa-4x"></i></a> 
 
    <a href="https://twitter.com/search?q=%40hreamer&src=typd&lang=en"><i class="fa fa-twitter fa-4x"></i></a> 
 
</div>

来源

2016-06-20 CookieM

'align-items'用于Flexbox项目;见：https://developer.mozilla.org/en-US/docs/Web/CSS/align-items – feeela

我试过了，它没有工作。谢谢你的评论！对不起，没有把这个问题。 – CookieM

您可以通过使用左，右边距值auto中心一个独立的元素。由于图像是内嵌元素，因此您还必须使用display: block;才能使其工作。和元素需要宽度：

.hudson { 
 
    color: white; 
 
    position: relative; 
 
    font-size: 60px; 
 
    top: 105px; 
 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.threeD { 
 
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); 
 
} 
 
.p1 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 70px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p2 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 80px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p3 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 90px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.coding { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width:125px; 
 
    max-height:125px; 
 
    padding: 10px; 
 
} 
 
.paracolor { 
 
    color: skyblue; 
 
    font-size: 25px; 
 
    font-family: Orbitron; 
 
    text-align: center; 
 
} 
 
#icons { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
} 
 
#icons i { 
 
    color: white; 
 
} 
 
body { 
 
    background-image: url(PICTURES1/mountains4.jpeg); 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" /> 
 
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css"> 
 
<img class="coding animated fadeInDown" src="PICTURES1/coding.png"> 
 
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2> 
 
<p class="paracolor p1 animated fadeInRightBig">blah blah blah</p> 
 
<p class="paracolor p2 animated fadeInLeftBig">blah blah blah</p> 
 
<p class="paracolor p3 animated fadeInRightBig">blah blah blah</p> 
 
<div id="icons"> 
 
    <a href="https://www.instagram.com/hreamer/"><i class="fa fa-instagram fa-4x"></i></a> 
 
    <a href="mailto:[email protected]"><i class="fa fa-envelope-o fa-4x"></i></a> 
 
    <a href="https://twitter.com/search?q=%40hreamer&src=typd&lang=en"><i class="fa fa-twitter fa-4x"></i></a> 
 
</div>

来源

2016-06-20 16:08:12 feeela

非常感谢！祝你有美好的一天！ – CookieM

好像你没有足够的搜索作为一个初级开发已经。有很多方法可以做到这一点，如果你有谷歌它。

只需添加

填充：0 0 0 47％;

在您的img标签样式。

<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="padding: 0 0 0 47%; max-width:125px;max-height:125px;">

来源

2016-06-20 16:17:58 Riddhi

感谢您的意见和反馈！帮助过我。 – CookieM

在CSS中对齐照片在中心

回答

相关问题