Позиционирование текста и изображения по центру по горизонтали с использованием position: relative

ProgramBox

Позиционирование текста и изображения по центру по горизонтали с использованием position: relative

Post author:admin
Запись опубликована:24 апреля, 2023
Post category:Вопросы по программированию

#html #css #css-position

#HTML #css #css-position

Вопрос:

Мне было интересно, как я могу расположить текст по центру по горизонтали. По центру по горизонтали с изображением. Я не хочу использовать position: absolute атрибут. Это связано с тем, что длина правого и левого текста может изменяться, а для того, чтобы иметь абсолютный атрибут, вам нужна фиксированная ширина / размер.

 body {
    padding: 0;
    margin: 0;
}

.right-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("https://i.imgur.com/VXlnn8a.png");
}

.left-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
    font-weight: 700;
}

 <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>

1. вы можете добавить выравнивание текста по центру; в css основного текста body { отступ: 0; поле: 0; выравнивание текста по центру; }

2. Я думаю, вам нужен вертикальный центр для содержимого слева и справа от изображения

3. @HUSSAIN text-align: center центрирует текст по вертикали.

4. @Alex я просто гуглю это, чтобы подтвердить, text-align: center используется для центрирования текста по горизонтали, в то время как я думаю, вам нужно выровнять его по центру по вертикали

Ответ №1:

Вы можете использовать flexbox для выравнивания элементов по горизонтали по центру, добавив приведенный ниже код к родительскому div

 .parent{
   display:flex;
   align-items: center;
}

Это текущий фрагмент вашего кода, содержащий эти изменения

    

    

    body{
           padding: 0;
           margin: 0;
           font-family: arial;
        }  
.content{
       display: flex;
       align-items: center;
    }

.right-text {
        font-size: 13px;
    }

    .icon {
        width: 32px;
        height: 32px;
        background: url("https://i.imgur.com/VXlnn8a.png");
    }

.left-text {
        font-size: 13px;
        font-weight: 700;
    }

         <div class="content">
           <div class="right-text">Right</div>
           <div class="icon"></div>
           <div class="left-text">Left</div>
        </div>

Ответ №2:

Вы можете просто добавить контейнер flexbox и установить для его свойства align-items значение center.

 <div class="container">
  <div class="right-text">Right</div>
  <div class="icon"></div>
  <div class="left-text">Left</div>
</div>

И это контейнер класса:

 .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

Ответ №3:

Привет, если вы хотите выровнять по вертикали, вот обновленный фрагмент

 body {
    padding: 0;
    margin: 0;
}

.right-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("https://i.imgur.com/VXlnn8a.png");
    top: 10px;
    margin: 0 5px;
}

.left-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
    font-weight: 700;
}

 <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>

1. Есть ли способ сделать это без изменения положения изображения. Таким образом, изменяется только положение текста

2. Да, вместо указания top в классе image используйте свойство в обоих .left-text и .right-text вместо положительного значения используйте отрицательное значение в случае текста. Единственное дополнительное свойство, которое я привел ниже .right-text { top: -10px; } .left-text { top: -10px; }

Ответ №4:

На самом деле вам нужно обернуть ваш right-text , icon и left-text элемент в childContainer , а затем обернуть ваш childContainer элемент в parentContainer wrap.

 <div class="parentContainer">
  <div class="childContainer">
    <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
  </div>
</div>

Далее вам нужно применить FlexBox с центром justify-content и align-items значением, а также добавить height: 100vh . Упомянутые изменения применяются к приведенному ниже фрагменту кода. Попробуйте это, я надеюсь, это вам поможет. Спасибо

 body {
    padding: 0;
    margin: 0;
}

.right-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("https://i.imgur.com/VXlnn8a.png");
}

.left-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
    font-weight: 700;
}

.parentContainer {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

 <div class="parentContainer">
  <div class="childContainer">
    <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
  </div>
</div>