2016-01-20 4 views
2

У меня есть встроенное изображение в абзаце. Я хочу поместить это изображение в середине абзаца. я попытался его в центр с ...Плавающее изображение в центре

<center> 

... но я видел, что это было амортизироваться в HTML5.
Я пытался использовать поплавок его ...

<img style="float: middle;"> 

... но оказывается, что это даже не существует.

Есть ли короткий способ сделать это, желательно внутри тега img, например, с атрибутом стиля?
Вот мой HTML до сих пор ...

<p> 
    <img id="resize" width="70%" src="../logo.png" alt="Alt" style="CENTER THIS IMAGE... SOMEHOW..."> 
</p> 
+0

Орион закрыл этот вопрос, но не потрудился ссылаться на исходный ответ. Итак, вот оно: https://stackoverflow.com/questions/28336888/html-img-align-middle-not-working – Ampere

ответ

6

Вы можете сделать это с помощью встроенного style="display:block; margin-left: auto; margin-right: auto;"

или добавить его к классу CSS

.myimage { 
     display:block; 
     margin-left: auto; 
     margin-right: auto; 
    } 

обновляется на основе CBore комментарий

+0

Dang. избили меня! –

+0

Вы пытаетесь создать стиль = "vertical-align: middle;" – step

+0

Вы можете поместить свой код html и css? – step

0

Вы можете просто добавить text-align: center; в <p> тег

Как <p style="text-align:center">

+0

Да! Это работает. Благодарю. –

0

Если вы знаете размер, как вы хотите быть, вы можете положить предел слева и справа равным 100. Например

<!DOCTYPE> 
<html> 
<head> 
</head> 
<style> 
#resize{ 
margin-left:15%; 
margin-right:15%; 
} 
</style> 
<body> 

<div> 
<p> 
    <img id="resize" width="70%" src="http://codingkids.businesscatalyst.com/logo.png" alt="Alt" > 
</p> 
</div> 
</body> 
</html> 
+0

Метод очистки, а также метод использования, если вы не статически устанавливаете ширину, это делать, как сказал CBroe и помещает отображение: блок в CSS для img. Я предполагаю, что я просто использую bootstrap для всех моих потребностей в центрировании –

0

Ну, это внутри 100 % width. Я не уверен, в какой среде вы работаете, но можете ли вы добавить свойство css (text-align: center;) в этот тег абзаца?

+0

Я работаю в HTML, CSS, Bootstrap, Foundation и w3.css –

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