Выравнивание по центру с помощью CSS - поскольку оно заменено <CENTER>, может ли оно, по крайней мере, работать правильно? - PullRequest
Новая
       9

Выравнивание по центру с помощью CSS - поскольку оно заменено <CENTER>, может ли оно, по крайней мере, работать правильно?

0 голосов
/ 18 октября 2011

У меня есть простой запрос, который CSS не может доставить ...

Я бы хотел, чтобы 3 DIV стояли рядом - первый и третий DIV содержат одно изображение - второй DIV содержитстрока текста, изображение, другая строка текста.

Они должны появиться вот так 

IMAGE1  TEXT1  IMAGE2
        IMAGE2
        TEXT2

С - и это бит, который я не могу заставить работать - TEXT1, IMAGE2 и TEXT2 центрированы внутриширина 2-го DIV - что-то вроде этого 

   MY TEXT
MY WIDER IMAGE
     TEXT

Тег CENTER сделал бы это за секунды, но CSS, очевидно, не может сделать что-то столь простое!?!?

psв ответ на запрос кода - что-то вроде этого для начинающих 

<DIV>
  <IMG src=image1.jpg>
</DIV>
<DIV>
  <p>text 1</p>
  <IMG src=image2.jpg>
  <p>text 2</p>
</DIV>
<DIV>
  <IMG src=image3.jpg>
</DIV>

Основной CSS будет 

.DIV {
  display: inline;
  float: left;
}

Все, что мне нужно, это магия, чтобы центр DIV выровнял содержимоецентрализованно так, как тег CENTER достиг бы за миллисекунды ...

, и я пробовал разные вещи, включая inline-block, margin: auto и т. д. -

Ответы [ 3 ]

1 голос
/ 18 октября 2011

Попробуйте что-нибудь подобное.

  1. float ваш div с
  2. используйте text-align:center для текста
  3. оберните ваши изображения и дайте им margin:1em auto

HTML 

<DIV>
    <p><IMG src=image1.jpg></p>
</DIV>
<DIV>
    <p>text 1</p>
    <p><IMG src=image2.jpg></p>
    <p>text 2</p>
</DIV>
<DIV>
    <p><IMG src=image3.jpg></p>
</DIV>

CSS 

div{
    float:left;
    border:1px solid black;
    width:150px;
    height:200px;
}

div p{
    text-align:center;
}

div p img{
    width:20px;
    margin:1em auto;
}

Пример: http://jsfiddle.net/PvgSr/

0 голосов
/ 18 октября 2011

Не видя ваш код, трудно ответить, но Вот очень простой пример (jsfiddle) того, что вы описали.

0 голосов
/ 18 октября 2011

Возможно, вы должны поместить <br> после вашего изображения и первый текст в DIV2.Тогда вы должны применить text-align: center к DIV2.Это единственные вещи, которые я могу предложить вам, не видя код.

РЕДАКТИРОВАТЬ:

Применяется text-align: center к внутреннему абзацу и центрировать изображение отдельно, см.http://jsfiddle.net/Lapple/UAm5p/1/

...