删除两个图像之间的空间并居中的代码

Question

I am having difficulty with code for two images that I want to be centered and to have no space in-between.

I am inexperienced and don't really know how to merge both codes into 1..

Code I am using for removing space in-between images:

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

Code I am using to center an image:

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

Any help would be appreciated.

Answer 1

You can use table as well based on your need,

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

For better control to each DIV, you can use this approach

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

Try this :

<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>

or you can place one <div> inside another <div> and center the inner <div> with the images.

[PS:Avoid inline CSS as far as possible.Instead put the css in header or external css file]

Answer 3

this is what you want:

<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>

example: http://jsfiddle.net/X7cfw/

Again, avoid inline styling when at all possible