Как я могу Центрировать изображения с текстом ниже и выше, используя HTML и CSS?

Question

Как я могу Центрировать изображения с текстом ниже и выше, используя HTML и CSS?

0

Привет, я новичок в html & css, и у меня есть вопрос. Я пытаюсь отобразить 4 изображения в центре коробки рядом с каждым другим. В настоящее время я использую таблицы, но это дает много кода в моем html & css:

CSS:

/*box*/

#content2{
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  box-shadow: 0px 1px 1px #999;
  text-align: center;
  overflow:hidden;
} 

/*table*/
table{
 margin-right: auto;
 margin-left: auto;
 display: inline-block;
}
td,th{
 padding: 20px;
}

а затем путь к большому html:

<div id="content2">
    <h4>Onze producten</h4>
    <table>
        <tr>
            <td><a href="../html/kleding.html"> Pika deken</a></td>
        </tr>
        <tr>
            <td><a href="../html/kleding.html"><img src="../images/baby1.jpg"></a></td>
        </tr>
        <tr>
            <td>€20</td>
        </tr>
    </table>
    <table>
    <tr>
        <td><a href="../html/kleding.html">School outfit</a></td>
    </tr>
    <tr>
        <td><a href="../html/kleding.html"><img src="../images/boy1.jpg"></a></td>
    </tr>
    <tr>
        <td>€140</td>
    </tr>
    </table>
    <table>
        <tr>
            <td><a href="../html/kleding.html">Bussines girl</a></td>
        </tr>
        <tr>
           <td><a href="../html/kleding.html"><img src="../images/girl2.jpg"></a></td>
        </tr>
        <tr>
            <td>€250</td>
        </tr>
    </table>
    <table>
        <tr>
            <td><a href="../html/kleding.html">Summer</a></td>
        </tr>
        <tr>
            <td><a href="../html/kleding.html"><img src="../images/girl1.jpg"></a></td>
        </tr>
        <tr>
            <td>€99.99</td>
        </tr>
    </table>
</div>

Есть ли способ сделать это более эффектно? Дизайн должен оставаться жидким. заранее спасибо

Thomas Pen 20 окт. 2013, в 14:39

Источник

0

Можете ли вы дать экран печати о том, как выглядит существующий способ?
th1rdey3 20 окт. 2013, в 12:17

Теги:

html

css

html5

image

2 ответа

Ещё вопросы

Можете ли вы дать экран печати о том, как выглядит существующий способ?

user2693017 · Answer 1 · 2013-10-20T10-41-00.000Z

Максимум. упрощено (хорошо, мы могли бы использовать подписи img тоже)

http://jsfiddle.net/EpyUb/

HTML

<div id="content2">
    <h4>Onze producten</h4>
    <div class="container">
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
    </div>
    </div>
</div>

CSS

.product {display: inline-block;}
.product img {display: block;}

Спасибо, код работает просто отлично.
@ThomasPen Если это помогает улучшить дизайн, вы можете изменить ".product img" на ".product a", чтобы также установить заголовок как "display: block". PS. Пожалуйста, примите ответ, что вопрос решен.

spacebean · Answer 2 · 2013-10-20T09-47-00.000Z

Вы можете попробовать что-то вроде этого:

<div id="content2">
<h4>Onze producten</h4>
<div class="section">
    <a href="../html/kleding.html"> Pika deken</a>
    <a href="../html/kleding.html"><img src="../images/baby1.jpg" /></a>      
    €20
</div>
<div class="section">

    <a href="../html/kleding.html">School outfit</a>
    <a href="../html/kleding.html"><img src="../images/boy1.jpg" /></a>
        €140
    </div>
    <div class="section">          
        <a href="../html/kleding.html">Bussines girl</a>
        <a href="../html/kleding.html"><img src="../images/girl2.jpg" /></a>
            €250
    </div>
    <div class="section">
      <a href="../html/kleding.html">Summer</a>
        <a href="../html/kleding.html"><img src="../images/girl1.jpg" /></a>
          €99.99
   </div>      
</div>

и css:

 #content2{
  margin: 30px auto;
  background: white;
  padding: 20px;
  clear: both;
  box-shadow: 0px 1px 1px #999;
  text-align: center;
  overflow:hidden;
} 

.section {
    display: inline-block;
    margin: 0 10px;
}    

.section a {
   display: block; 
   padding-bottom: 10px; 
}

пример здесь: http://jsfiddle.net/thespacebean/xGqDE/

Я пока не могу высказать ответ, но он мне очень помог! Спасибо
Я думаю, что вы можете «принять» ответ, даже если вы еще не можете проголосовать. Ура :)