在行的中間顯示兩個圖像（在同一行上），但在

之間有一個特定空間對不起，如果我以非專業的方式提問我的問題。我有一個div裏面有兩個圖像（上一個和下一個圖像 - 箭頭）;我想把它們放在一起，以使這兩幅圖像位於中間，並在它們之間有一些特定的空間;在行的中間顯示兩個圖像（在同一行上），但在

我曾嘗試是如下：

<div class='navbars'> 
     <img src='<?PHP echo base_url('image/previous.png'); ?>' id='previous' style='width: 70px;height:70px;' alt='previous'> 
     <img src='<?PHP echo base_url('image/next.png'); ?>' id='next' style='width: 70px;height:70px;' alt='next'> 
</div>

和我的CSS：

#previous , #next{ 
    cursor: pointer; 
} 

#previous{ 
    margin-left: 330px; 
} 

#next{ 
    margin-left: 550px; 
}

但首先的330pc和550都沒有把他們在中心的好方法！有沒有更好的方法？其次圖像顯示在兩個不同的行！不一樣的行！

如果您需要更多的澄清，請讓我知道哪部分您需要更多的化合物，並且我會提供更多的說明。

來源

2013-10-31 user385729

我會使用兩種技術之一。

將圖片放在<span>之內，並使用margin: auto;作爲範圍。
在<div>上使用text-align: center;，所以裏面的元素居中。

對於分離，我通常傾向於向其中一個元素添加邊距。

你可以看到第二個選項的工作：http://jsfiddle.net/57HCG/：

#previous , #next{ 
    cursor: pointer; 
} 

#next{ 
    margin-left: 25px; 
} 

.navbars { 
    text-align: center; 
}

來源

2013-10-31 20:00:11 jjmontes

對於他們是彼此相鄰，你需要把它們飄浮：

float:left;

然後添加：

margin-right:XXpx;

向左之一。

應該這樣做。

來源

2013-10-31 19:52:27

已經試過了！但問題是，在這些箭頭下面我有我的畫廊，如果我浮動箭頭一些圖像出現在下一個和以前的箭頭相同的箭頭 – user385729

你願意爲我們製作一個小提琴嗎？我很難看到你的意思只有我的想象力。 ;） –

埃文如果我把寬度100％仍然我的畫廊的一些圖像出現在同一行的下一個和以前的箭頭！ – user385729

添加圖像作爲父inline-block和text-align:center。然後將margin-right添加到第一個。

JSFiddle

HTML

<div class="wrapper"> 
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/> 
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/> 
</div>

CSS

.wrapper { 
    font-size:0; 
    text-align:center; 
    width:50%; 
    margin:0 auto; 
    border:1px solid grey; 
    padding:10px; 
} 

.wrapper img { 
    display:inline-block; 
    vertical-align:top; 
} 

.wrapper img:first-child { 
    margin-right:25px; 
}

來源

2013-10-31 20:02:57

許多人認爲，浮動元素佈局的目的是不好的。看到這個SO問題：Are floats bad? What should be used in its place

所以讓我提出不同的解決方案（div2和div3是替身圖像）：

HTML

<div id="div1"> 
    <div id="div2">1</div> 
    <div id="div3">2</div> 
</div>

CSS

#div1 { 
    position:relative; 
    background-color:#CCC; 
    height:100px; 
} 

#div2, #div3 { 
    position:absolute; 
    height:100px; 
    width:100px; 
} 

#div2 { 
    background-color:#09f; 
    top:0; 
    right:50%; 
    margin-right:10px; 
} 

#div3 { 
    background-color:#f90; 
    top:0; 
    left:50%; 
    margin-left:10px; 
}

DEMO

http://jsfiddle.net/qK6JA/

來源

2013-10-31 20:05:08

在行的中間顯示兩個圖像（在同一行上），但在

回答

相關問題