3

要するに、私はこれに似たデザインを達成しようとしています:

デザインのモックアップ

白いボックスは画像で、赤いブラシはテキストの行です (一番上の行には名前と専門分野の下が含まれます)。行 - 互換性の問題があるため、このようなものにテーブルを使用することにあまり熱心ではないので、ここにいる誰かが、それにフォールバックする前に div で動作させるために私を助けてくれることを願っています.

以下は、私がこれまでに持っているコードとjsfiddleの伴奏です。

<div id="design-cast">
     <h4>Design</h4>

    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
</div>

CSS

.member {
    display: inline;
}
.name {
    display: inline;
}
.member img {
    width: 13%;
    display: block;
}

jsfiddle

4

3 に答える 3

0

まさにあなたが望んでいたもので、テキストは中央に配置されています。

.member {
display: inline-block;
width: 150px;
height: 200px;
vertical-align: top;
text-align:center;
}
.name {
    display: inline;
}
.member img {
    width: 100%;
    display: block;
}

jsfiddle: http://jsfiddle.net/skoltyno/MhRnz/4/

于 2013-11-02T22:12:29.193 に答える
0

text-align: centerインライン ブロック ソリューション (この方法では、必要に応じてすべてをコンテナーに入れることができます):

.member {
    display: inline-block;
    width: 150px;
    height: 200px;
    vertical-align: top;
}
.name {
    display: inline;
}
.member img {
    width: 100%;
    display: block;
}

http://jsfiddle.net/MhRnz/2/

于 2013-11-02T22:13:43.763 に答える