Как расположить содержимое рядом с плавающим элементом и относительно содержащего элемента? - PullRequest
Новая
       4

Как расположить содержимое рядом с плавающим элементом и относительно содержащего элемента?

8 голосов
/ 18 ноября 2010

У меня есть разметка, которая выглядит следующим образом 

<div>
  <h1 style="text-align:center;" >Heading 1</h1>
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
  Content goes here
</div>

Проблема в том, что заголовок 2 центрирован относительно остальной части пространства после изображения, а не всего элемента div, поэтому он не центрирован настр.

Если я удаляю img из потока с позицией: absolute, он не сдавливает содержимое, а перекрывает его.

Ответы [ 5 ]

1 голос
/ 29 апреля 2018

Я знаю, что опаздываю на вечеринку, но для будущих читателей я нашел другой подход к этой проблеме. используйте 3 элемента div (left div, middle div, right div) внутри контейнера div, отображаемого во флекс.

сделайте левый и правый div одинаковой относительной ширины (в%) и поместите каждый из них в свою сторону.
Установите среднюю ширину div с напоминанием 100% - (left div + right div). найдите изображение в левом div (или правом div, если ваше направление RTL).
установить выравнивание текста среднего div как «центр». проверьте этот пример. Также здесь есть Плункер .

enter image description here 

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>

#editorheader {
  display:flex;
}

#leftheaderdiv {
    float:left;
    width:20%;
    background-color:gray;
    display:inline-block;
}
#middleheaderdiv {
float:left;
    width:60%;
    background-color:red;
    display:inline-block;
    text-align: center;
}

#rightheaderdiv {
    float:right;
    width:20%;
    background-color: gray;
}

    </style>
  </head>

  <body>
   <div class="subheader" id="editorheader">
       <div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
       <div id="middleheaderdiv">I AM IN THE MIDDLE</div>
       <div id="rightheaderdiv"></div>
   </div>

  </body>

</html>
1 голос
/ 18 ноября 2010

Решено методом проб и ошибок.Я не знаю почему, но в моем тестировании это работает, только если ширина установлена ​​между 12 и 80%.

Таким образом, кажется, что «h1» является элементом блока, а выравнивание текста не центрирует элементы блока,внутри него сосредоточены только встроенные элементы, что объясняет «центрированное смещение».Вот и получается, что ответ - это тот же ответ на вопрос «как вы центрируете блочный элемент?» 

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>
1 голос
/ 18 ноября 2010

Один из способов - добавить правый отступ в div с размером логотипа: 

<div style="padding-right: 50px;">
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading</h1>
</div>
<div>
  Content goes here
</div>

Другой способ - удалить заголовок из потока. Это работает только в предположении, что высота логотипа больше высоты заголовка. Также следует помнить, что изображение и заголовок могут перекрываться. 

 <h1 style="position: absolute; width: 100%; text-align:center;">
    Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
  Content goes here
</div>
0 голосов
/ 18 ноября 2010

Это самое простое решение:

<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>

  • = ширина логотипа
0 голосов
/ 18 ноября 2010

Если вы действительно используете изображение логотипа, вы можете попробовать это решение: 

<div> 
  <img style="float:left;" src="logo.jpg"/> 
  <h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1> 
</div>

где -100px заменить на половину ширины вашего изображения.

редактирование:

Идея с абсолютной позицией из ответа Littlegreen работает. Проверьте это: 

<div style="position:relative;"> 
  <img style="float:left; position:absolute;" src="logo.jpg"/> 
  <h1 style="text-align:center;" >Heading</h1> 
</div>
...