html - 在 css 中将照片居中对齐时遇到问题

Question

我是 HTML 的新手并且正在学习这门语言，但是当我尝试创建这个网站时，顶部的照片不会居中对齐。我试过垂直对齐和填充，但运气为零。将我的代码放在下面。感谢您的回复!

.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:reamer.hudson@gmail.com"><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>

Answer 1

您可以使用左右边距值 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:reamer.hudson@gmail.com"><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>