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放在标题或外部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/

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

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

3 个答案: