Блог

Главная - Вопросы по программированию - Как расположить текст слева от центрального изображения (HTML)

Как расположить текст слева от центрального изображения (HTML)

#html #css

Вопрос:

У меня есть изображение, центрированное в середине div, и некоторый текст, который я хочу отобразить слева от него. Однако текст отображается слева и под ним. Я хочу, чтобы текст обтекал изображение слева, вот так:

 -----------------------------------------------------
|blah blah ------------------------------------     |
|blah      |     Centered image              |      |
|          |                                 |      |
|          -----------------------------------      |
|                                                   |                  
-----------------------------------------------------

Вот изображение того, как это выглядит в настоящее время:

Предварительный просмотр

 .playermedia1 {
  margin-left: -8px;
  padding-top: 5px;
  padding-left: 30px;
  padding-bottom: 30px;
  background-color:white;
  font-family: 'Trebuchet MS';
}

.image {
  width:475px;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
} 
 <div class="playermedia1">
  <a href="https://i.imgur.com/WKBkmTN.jpg" target="_blank" rel="noopener noreferrer" class="image"><img src='https://i.stack.imgur.com/1iRok.jpg' class="image"></a>
  <p>text here</p>
</div>

Одна вещь, которую я попробовал, — это переключить текст так, чтобы он был выше изображения, поэтому тег «p» пишется перед тегом «a». Вот как это выглядит:

желанный

Чтобы было ясно, я хочу, чтобы текст и изображение были на одном уровне. Есть какие-нибудь предложения?

Комментарии:

1. display: inline-block; работает ли это на вас?

2. <p> является элементом уровня блока (как и <div>)<div> , поэтому он прерывает строку. Возможно , вы захотите изучить использование flex-box или grid макет, чтобы у вас было равномерное распределение ваших элементов… или используйте position:absolute; на position:relative; родителе… или используйте float:left; … или display:inline-block; чтобы линия не прерывалась.

Ответ №1:

Это кажется хорошим вариантом использования CSS-сетки.

Содержащий элемент может иметь display: grid и шаблон сетки с тремя столбцами.

Первая колонка 1fr должна заполнить 1 часть доступного пространства.

Вторая колонка 475px широкая (или столько места, сколько вы хотите, чтобы занимало ваше изображение).

Третья колонка 1fr снова должна заполнить вторую часть доступного пространства.

Поскольку первый и третий столбцы равномерно распределяют оставшееся пространство, они автоматически центрируют второй столбец.

 .container {
  display: grid;
  grid-template:
    "caption image ..."
  /  1fr     475px 1fr;
}

.image {
  grid-area: image;
}

.caption {
  grid-area: caption;
} 
 <figure class="container">
  <img src="http://via.placeholder.com/475x300" class="image" alt="a 475x300 pixel placeholder image" />
  <figcaption class="caption">Lorem ipsum dolor sit amet</figcaption>
</figure>

Ответ №2:

Одно из решений состоит в том, чтобы сделать .playermedia1 гибкую коробку и придать ей ::after псевдоэлемент, а затем назначить flex: 1 абзацу и псевдоэлементу.

 .playermedia1 {
  font-family: 'Trebuchet MS';
  display: flex;
}

.playermedia1::after {
  content: '';
}

.playermedia1::after, .playermedia1 p {
  flex: 1;
  margin: 0;
}

.image {
  width: 475px;
} 
 <div class="playermedia1">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <a href="https://i.imgur.com/WKBkmTN.jpg" target="_blank" rel="noopener noreferrer" class="image"><img src='https://i.stack.imgur.com/1iRok.jpg' class="image"></a>
</div>

Ответ №3:

Решение flexbox для этого было бы следующим:

 .playermedia1{
  position: relative;
  width: 100%; /** fill up its parent container, this is optional **/
  display: flex; /** this is important, tells the container to operate as a flex container **/
} 
 <div class="playermedia1">
  <div class="text__div">
    <p>text here blahhhhhhhhhhh</p>
  </div>
  <div class="img__div">
    <a href="https://i.imgur.com/WKBkmTN.jpg" target="_blank" rel="noopener noreferrer" class="image"><img src='https://i.stack.imgur.com/1iRok.jpg' class="image"></a>
  </div>
</div>

Ответ №4:

Всякий раз, когда я пытаюсь это сделать, у меня всегда получается лучше, когда я даю контейнерам цвет фона, чтобы я мог видеть, как они заполняют пространство друг в друге. В приведенном здесь примере, вероятно, может быть несколько разных реализаций (сетка CSS может быть хорошей), но мне приходит на ум использовать Flex со столбцами и центрировать изображение в средней колонке.

Я сохранил цвета фона для справки, но их можно удалить, удалив имена классов и стили.

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

.flex {
  flex: 1;
}

.image {
  height: 40px;
  width: 40px;
}

.container {
  display: flex;
  height: 100vh;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orange;
}

.aqua {
  background-color: aqua;
}

.red {
  background-color: red;
} 
 <div class="container">
  <div class="orange flex">
    <p>Text</p>
  </div>
  <div class="playermedia1 aqua flex">
    <div class="red image">
      <a href="#">
        <img src='../img/1.jpeg'>
      </a>
    </div>
  </div>
  <div class="flex blue"></div>
</div>

Ответ №5:

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

 <div class="playermedia1">
   <p>text here</p>
   <a href="https://i.imgur.com/WKBkmTN.jpg" target="_blank" rel="noopener noreferrer"> 
      <img src='https://i.imgur.com/WKBkmTN.jpg' class="image">
   </a>    
</div>



.playermedia1 {
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   margin-top: 10%;
 } 
 .image {
    width:475px;
 }

Ответ №6:

Вы кодируете просто, используя Flex Box:

 <div class="container">
  <p>Your Text Here</p> 
  <img src="img.png" />
<div>

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

p {
  margin-right: 10px;
}

Ответ №7:

Если вы хотите, чтобы размер изображения изменился и по-прежнему был сосредоточен в родительском узле (в данном случае половина ширины экрана), я бы использовал a <div> с a background-image . Вот мои два цента:

 /* css/external.css */
*{ /* set font-size individually or white space may be an issue */
  box-sizing:border-box; padding:0; margin:0; font-size:0; border:0; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
  -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  display:flex; justify-content:center; flex-wrap:wrap; gap:7px; padding:5px; overflow-y:auto;
}
.main>*{
  flex:1; width:50%;
}
p{
  font-size:18px; text-overflow:ellipsis;
}
.center_img{
  background-position:center top; background-size:contain; background-repeat:no-repeat;
}
#mc_img{
  background-image:url('https://i.stack.imgur.com/1iRok.jpg');
} 
 <!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <p id='blah'>blah blah blah TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST more here</p>
    <div class='center_img' id='mc_img'></div>
  </div>
</body>
</html>
Метки: