Question

英语专业;我几乎不知道没有关于编码，所以请使用非常基本的语言。我需要知道我的图书出版课程网站。我试图为我们的＆＃34;团队成员＆＃34;页。我怎么做？下面是第一行图像。现在，他们转移到了左边。

＆＃13;

<div id="main" class="container">



  <!-- First Set -->
  <h3> Publishers </h3>
  <div class="box alt">
    <div class="row 50% uniform">
      <!-- % changes space between pictures -->
      <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mike<br>Course Director</p></span></div>
      <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mackenzie<br>Publisher</p></span></div>
      <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Liz<br>Associate Publisher</p></span></div>
      <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>
    </div>
  </div>

＆＃13;

Answer 1

使用<center>标记将任何内容置于中心位置希望这会有所帮助...

＆＃13;

<h3> Publishers </h3>
<center>
        <div class="box alt">
            <div class="row"> <!-- % changes space between pictures -->
                <div class="2u"><span class="image fit"><img src="images/headshots/mike.JPG" alt="" /><p> Mike<br>Course Director</p></span></div>
                <div class="2u"><span class="image fit"><img src="images/headshots/mackenzie.JPG" alt="" /><p> Mackenzie<br>Publisher</p></span></div>
                <div class="2u"><span class="image fit"><img src="images/headshots/liz.JPG" alt="" /><p> Liz<br>Associate Publisher</p></span></div>
                <div class="2u"><span class="image fit"><img src="images/headshots/mia.JPG" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>           
            </div>
            
        </div>
        </center>

＆＃13;

Answer 2

<head>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>

这是使用flex

解决的css的严重问题

styles.css的

.row {
    display: flex;
    align-items: center;     /* vertical centering   */
    justify-content: center; /* horizontal centering */
}

Answer 3

你也可以用它来学习css。

＆＃13;

.row {
  text-align: center;
}

＆＃13;

<h3> Publishers </h3>
        <div class="box alt">
            <div class="row"> <!-- % changes space between pictures -->
                <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mike<br>Course Director</p></span></div>
                <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mackenzie<br>Publisher</p></span></div>
                <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Liz<br>Associate Publisher</p></span></div>
                <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>           
            </div>
        </div>

＆＃13;

Answer 4

按如下方式修改您的代码。

<!-- First Set -->
    <h3> Publishers </h3>
    <div class="box alt">
        <div class="row 50% uniform" style="left: 50%;position: absolute;> <!-- % changes space between pictures -->
            <div class="2u"><span class="image fit"><img src="images/headshots/mike.JPG" alt="" /><p> Mike<br>Course Director</p></span></div>
            <div class="2u"><span class="image fit"><img src="images/headshots/mackenzie.JPG" alt="" /><p> Mackenzie<br>Publisher</p></span></div>
            <div class="2u"><span class="image fit"><img src="images/headshots/liz.JPG" alt="" /><p> Liz<br>Associate Publisher</p></span></div>
            <div class="2u"><span class="image fit"><img src="images/headshots/mia.JPG" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>           
        </div>
    </div>

如何将一行图像居中？

4 个答案: