Текст и изображение в той же строке

Я пытаюсь добиться чего-то вроде этого: Текст и изображение в той же строке

Но выпускающий так:

enter image description here

Это мой HTML-код:

<!doctype html> 
<html> 
<head> 
<title>Test</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<p>Text</p> 
<p>Text 2</p> 
<p align="center"> 
<img src="Images/image" width="150" height="150" alt="Image"/> 
</p> 
<p>Test 3</p> 
<p>Test 4</p> 
</body> 
</html>

И вот мой CSS:

@charset "UTF-8"; 
/* CSS Document */ 
body 
{ 
    background-color:#00A1B3; 
} 
img 
{ 
    display:inline; 
} 
p 
{ 
    display:inline-block; 
    float:left; 
}

Что я делаю неправильно?

источник

2014-02-17 Abdullah Shafique

Дайте изображение и текст высоте и ширине, и поплавайте весь текст и изображение слева. – GoE

Для начала не помещайте изображение в тег 'p'. –

Вы можете удалить float свойство из пунктов, и использовать display: inline-block;(или inline), или просто использовать встроенную обертку как <span> вместо этого.

Кроме того, для выравнивания по вертикали инлайн (-блок) элементов, можно использовать vertical-align: middle; следующим образом:

img { 
    vertical-align: middle; } 

p { 
    display:inline-block; }

WORKING DEMO

Для горизонтального центрирования встроенных элементов, можно установить text-align: center; до исходный код элемент:

.parent { text-align: center; }

UPDATED DEMO.

источник

2014-02-17 16:52:35

Это работает, но оно перемещает текст и изображение влево. Как я могу сосредоточить его? –

@AbdullahShafique Только что обновил ответ. –

Теперь он работает во всех браузерах, кроме Safari –

Текст и изображение в той же строке

ответ

Смежные вопросы