0

専門的な方法で質問していない場合は申し訳ありません。内部に 2 つの画像 (前と次の画像 - 矢印) がある div があります。これら2つの画像が中央にあり、間に特定のスペースがあるように、それらを一列に並べたいと思います。

私が試したことは次のとおりです。

<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 はそれらを中央に配置する良い方法ではありません! もっと良い方法はありますか？次に、画像が 2 つの異なる行に表示されます。同じ列ではありません！

さらに明確化が必要な場合は、どの部分をさらに明確化する必要があるかをお知らせください。さらに明確化します。

4

4 に答える 4

1

2 つの手法のいずれかを使用します。

  • 画像を a 内に配置し、スパン<span>に使用します。margin: auto;
  • 内部の要素が中央に配置text-align: center;されているので、上で使用します。<div>

分離については、通常、要素の 1 つにマージンを追加することを好みます。

2 番目のオプションがhttp://jsfiddle.net/57HCG/で機能していることを確認できます。

#previous , #next{
    cursor: pointer;
}

#next{
    margin-left: 25px;
}

.navbars {
    text-align: center;
}
于 2013-10-31T20:00:11.640 に答える
0

それらが互いに隣り合うようにするには、それらを浮かせる必要があります。

float:left;

そして、次を追加します。

margin-right:XXpx;

左の方へ。

トリックを行う必要があります。

于 2013-10-31T19:52:27.683 に答える
0

多くの人は、レイアウト目的で要素をフローティングするのは良くないと考えています。この SO の質問を参照してください:フロートは悪いですか? その代わりに何を使うべきか

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

デモ

于 2013-10-31T20:05:08.083 に答える
0

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-31T20:02:57.787 に答える