Question

我试图将一些图像连成一行并显示直接位于其下方的文本，并将其置于中心，这是为了我的大学工作。我尝试了一些代码但无法使其工作。

＆＃13;

<div class="test">
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 100px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
  <p>
    <a href="https://www.facebook.com">
      <img height="200px" style="display: block; margin-left: 500px; float: left;border: 2px solid white; border-radius: 100%; margin-top: 30px;" src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
      <h3>Test</h3>
    </a>
  </p>
</div>

＆＃13;

Answer 1

我个人会这样做：

＆＃13;

.test a {
    margin-left: 10px; 
    float: left;
    text-align: center;
    overflow: auto; 
}

.test a img {
    width: 100px;
    border:2px solid white; 
    border-radius: 50%; 
}

＆＃13;

<div class="test">
        <a href="https://www.facebook.com">
            <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
            <h3>Test</h3>
        </a>
            <a href="https://www.facebook.com">
                <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                <h3>Test</h3>
            </a>
           
                <a href="https://www.facebook.com">
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
                    <h3>Test</h3>
                </a>
</div>

＆＃13;

关键点：

使用HTML进行标记。使用CSS作为样式。将它们分开。
不需要p标签。
要将三个区块浮动在一条线上，您必须设置“浮动：左侧”和“到不在img中的<a>元素。
如果我们使用基于浮动的布局，我们必须Clearing floats（因为浮动＆＃39;容器不想伸展以容纳浮动）。这就是为什么我添加了溢出：auto＆＃39;到名为＆＃39; .test＆＃39;
最后但并非最不重要的是，CSS有很多布局方法。我建议观看Flexbox。

Answer 2

首先，关闭<p>代码。

然后我个人inline-block p并移除img上的margin-left。

.test {
  text-align: center;
}

img {
  display: block; 
  float: left;
  border: 2px solid white; 
  border-radius: 100%; 
  margin-top: 30px; 
}

p {
  display: inline-block;
}

Answer 3

你需要做两件事：

HTML包装DIV以便能够控制您的块。
使用CSS

请尝试这个符合您要求的小提琴：

<style>
    div.test {
    width:auto;
    margin: auto;
    }
    
    div.block {
 
    float: left;

    }
    
    div.block a{
    display:inline-block; 
    margin-left: 50px;
    }
    
    
    div.block img {
    border: 2px solid white; 
    border-radius: 100%;
    width:150px;
    }
    
    h3 {
    text-align: center;
    }
    
</style>

<div class="test">
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
<div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
</div>
    <div class='block'>
<a href="https://www.facebook.com">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/12512240_1005566046198664_2775546349199755757_n.jpg?oh=a37edadd99a4631e165accf6bd193a9f&oe=58C8AD58">
<h3>Test</h3>
</a>
    </div>
</div>

在文本中直接显示文本

3 个答案: