Question

我希望我的两个图像并排，所以我使用一个列表将它们拼接在一个和另一个旁边，虽然我不确定如何将这些图像移动到页面的中间，同时保持它们是旁边的侧！我也应该使用列表或div来并排获取我的图像吗？

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jacques Andre</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="banner">
        <ul class="nav">
        <li><a href="##">Gallery</a></li>
        <li><a href="###">About</a></li>
        </ul>
        <div class="mainlogo">Jacques André</div>
</div>

    <h1 id="favs">some of my favorites</h1>
        <ul class="images">
        <li><img id="paris" src="img/paris.jpeg" alt="paris"></li>
        <li><img id="naturalframe" src="img/naturalframe.JPG" alt="natural frame"></li>
        </ul> 
</body>
</html>

CSS

body{
    background-color: #ffffff;
    padding:0;
    margin: 0 0 0 0;
    font-family: montserrat;
#favs{
    font-size: 30px;
    text-align: center;
    text-transform: capitalize;
    padding-top: 50px;
}
.images{
    list-style: none;
    padding-top: 30px;
}
.images > li{
    display: inline-block;
}
#paris{
    width: 300px;
    height: 533.3px;
}
#naturalframe{
    width: 300px;
    height: 533.3px;
}

Mock up of how I want it to look like

Answer 1

您要做的是为图片使用<div>容器，然后让<img>标签彼此相邻：

<div class="images">
  <img id="paris" src="img/paris.jpeg" alt="paris" />
  <img id="naturalframe" src="img/naturalframe.JPG" alt="natural frame" />
</div>

这些应为display: inline-block（图片的默认）。

为了在将<img>元素作为兄弟元素集中后集中它们，您需要做的就是为父容器（.images）提供适用于内联的规则text-align: center元素。这可能有点违反直觉，因为您正在对齐图像而不是文本，但它适用于所有内联元素。

这可以在下面看到，用绝对链接替换你的图像：

@font-face {
  font-family: montserrat;
  src: url('fonts/montserrat.otf')
}

body {
  background-color: #ffffff;
  padding: 0;
  margin: 0 0 0 0;
  font-family: montserrat;
}

.nav {
  background-color: gray;
  color: black;
  list-style: none;
  text-align: right;
  margin-top: 0;
}

.nav>li {
  display: inline-block;
  padding-right: 0px;
  font-size: 20px;
  margin-right: 20px;
  padding-top: 20px;
}

.nav>li>a {
  text-decoration: none;
  color: white;
}

.nav>li>a:hover {
  opacity: .5;
}

.banner {
  background-color: #684848;
  width: 100%;
  height: 400px;
}

.mainlogo {
  color: white;
  font-size: 70px;
  text-align: center;
  vertical-align: middle;
  line-height: 300px;
}

#favs {
  font-size: 30px;
  text-align: center;
  text-transform: capitalize;
  padding-top: 50px;
}

#paris {
  width: 300px;
  height: 533.3px;
}

#naturalframe {
  width: 300px;
  height: 533.3px;
}

.images {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Jacques Andre</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="banner">
    <ul class="nav">
      <li><a href="##">Gallery</a></li>
      <li><a href="###">About</a></li>
    </ul>
    <div class="mainlogo">Jacques André</div>
  </div>

  <h1 id="favs">some of my favorites</h1>
  <div class="images">
    <img id="paris" src="http://placehold.it/100" alt="paris" />
    <img id="naturalframe" src="http://placehold.it/100" alt="natural frame" />
  </div>

</body>

</html>

请注意，如果您要使用块级元素，则必须float将它们添加到left，并将它们与margin: 0 auto垂直对齐。

希望这有帮助！

Answer 2

您可以尝试在text-align: center中设置.images，如下所示：

.images{
    list-style: none;
    padding-top: 30px;
    text-align: center;
}

对齐列表中的图像

2 个答案: