Question

如何将这些照片全部放在网页的中心？这是我的HTML代码

<html>
<body>
    <div id="travel_photos">
      <img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="50"/>
      <img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
      <img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="50"/>
      <img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="50"/>
      <img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>

</body>
</html>

Answer 1

如果您尝试水平居中图像，请尝试以下操作：https://jsfiddle.net/a5u3q1w5/2/

HTML：

<div id="travel_photos">
    <img title="branson" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"/>
    <img title="branson" src="http://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"/>
    <img title="branson" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</div>

CSS：

#travel_photos > img {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  display: block;
}

Answer 2

请尝试以下操作：

<html>
<body>
      <img style="display: block; margin:auto;" title="branson" src="branson.jpg" alt="" width="150" height="50"/>
      <img style="display: block; margin:auto;" title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
      <img style="display: block; margin:auto;" title="denver" src="denver.png" alt="" width="150" height="50"/>
      <img style="display: block; margin:auto;" title="destin" src="destin.png" alt="" width="150" height="50"/>
      <img style="display: block; margin:auto;" title="PV" src="PV.png" alt="" width="150" height="50"/>

</body>
</html>

如何让我的照片在中心

2 个答案: