html - 用于删除 2 个图像之间的空间和居中的代码

Question

我在处理两个我想要居中并且中间没有空间的图像的代码时遇到了困难。

我没有经验，真的不知道如何将两个代码合并为 1..

我用于删除图像之间的空间的代码：

<div class="row">
<p style="line-height: 0.0em;"><img src="photo1 "/><img src=”photo2” /></p>
</div>

我用来使图像居中的代码：

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>

任何帮助，将不胜感激。

Answer 1

您也可以根据需要使用表格，

<table>
  <tr>
    <td>
         Image 1
    </td>
    <td>
          Image 2
    </td>
  </tr>
</table>

为了更好地控制每个 DIV，您可以使用这种方法

HTML

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

CSS

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}

jsfiddle：http: //jsfiddle.net/azXMN/

Answer 2

尝试这个 ：

<div id="wrapper" style="width:100%; text-align:center" class="row">
<p style="line-height: 0.0em;"><img src="photo1 "/><img src=”photo2” /></p>
</div>

或者您可以将一个<div>放在另一个里面<div>，然后将内部<div>与图像居中。

【PS：尽量避免内联CSS，而是把css放在header或者外部css文件中】

Answer 3

这就是你想要的：

<div class="row" style="text-align: center; font-size: 0;>
    <p style="line-height: 0.0em;">
        <img src="http://placekitten.com/150/100">
        <img src="http://placekitten.com/150/100">
    </p>
</div>

示例：http: //jsfiddle.net/X7cfw/

同样，尽可能避免内联样式