Выравнивание изображения с текстом, без уменьшения текста

#html #css #image

#HTML #css #изображение

Вопрос:

Итак, у меня есть поле «публикация», и оно будет содержать аватар и публикацию. Проблема в том, что когда я добавляю изображение, текст опускается ниже изображения. Вот о чем я говорю введите описание изображения здесь

Все, что я хочу сделать, это выровнять изображение по тексту. Вот мой код для изображения

 cursor: defau<
height: 74px;
width: 74px;
border-radius: 50% 50% 50% 50%;
margin-right: 19px;
vertical-align: middle;
margin-top: -19px;
display: inline-block;

И вот демонстрационная версия. Это не самая полная демонстрация, но она работает. Любая помощь была бы приятной. Я пытаюсь выровнять текст с изображением

1. Демонстрация неполная с неверным HTML, и изображение выглядит странно расположенным. По крайней мере, изображение того, как это должно выглядеть, было бы полезным.

2. Что-то вроде этого ?

3. ДА. Мне просто нужно выровнять текст с изображением сейчас @TylerH

Ответ №1:

Вы могли бы переместить свое изображение влево.

 img { 
    float: left;
}

Попробуйте!

или вы могли бы расположить абсолютно (может быть, это более уместно).

 .post {
    position: relative; /*Make absolutely positioned children relative to their .post parents */
}

.post img { 
    position: absolute;
    top: 50%;
    margin-top: -37px; /* negative. half of height/*
}

Это позволит сохранить ваше изображение в центре публикации.

Займитесь второй скрипкой!

1. Ну и как бы мне тогда выровнять текст с изображением? Например, выравнивание по вертикали.

2. ДА. Как это исправить?

3. top: 50% а отрицательное верхнее поле сохраняет изображение в центре публикации.

Ответ №2:

используйте css:

 float:left;

Вот JSFIddle: http://jsfiddle.net/UWtEF /

надеюсь, это поможет

1. пожалуйста, продемонстрируйте, как это помогло бы в JSfiddle.

2. Я бы точно не сказал, что это отвечает на мой вопрос, потому что это не выравнивает изображение с текстом….

3. Что вы подразумеваете под выравниванием? Я думал, что это означает «бок о бок»

Ответ №3:

Я видел ваш код, и, если я понимаю вашу проблему, вы хотите выровнять текст справа от аватара. На самом деле вы знаете размер аватара, тогда самое простое решение — сначала создать контекст для положения, затем :

 .post{position:relative;/* your other properties here */}

теперь у вас есть контекст, вы можете добавить абсолют для своего аватара, например :

 #IMG_1{position:absolute;left:0;top:0;/* your other properties here, don't forget to remove margins */}
/* I suggest you to replace #IMG_1 by .post > img{} */

теперь вам нужно только добавить отступ слева внутри содержимого вашего блока для публикации, затем :

 .post{padding-left:84px;/* your other properties here and don't forget position:relative; */}

Теперь вам нужно только исправить другие селекторы, такие как .message, .likes, .time, чтобы удалить отступы (достаточно оставить отступы в .post).

Я надеюсь, что это поможет вам.