Как выровнять изображение между текстом?

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

<style> 
body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin-left: auto; 
margin-right: auto; 
display: block; 
positon: relative; 
} 
#hypetop { 
position: fixed; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position: fixed; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
} 
</style> 
<body> 
<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
<img id="hype" src="DIREHYPE.png" width="224" height="224"> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div> 
</body>

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

источник

2014-09-06 BeepBoop BapBop

Вы можете использовать этот отзывчивый код css. Это может помочь вам. Попробуйте. Я могу изменить только position:fixed до position:relative.

Live Working Demo

HTML код:

<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
    <img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div>

CSS код:

body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin:auto; 
display: block; 
position: relative; 
margin-top:50px; 
} 
#hypetop { 
position: relative; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position:relative; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
}

Результат:

result

источник

2014-09-06 18:12:00 Developer

спасибо. это отлично сработало для меня. –

Приветствую вас, дорогая. – Developer

Вы должны представить их как блоки в первую очередь. Из того, что я получаю .. вам нужно 3 блока в горизонтальном порядке: абзац | изображение | пункт, который дает нам следующую структуру:

<p></p><img></img><p></p>

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

просто положить их так:

<span> 
<span id="test"><h1></h1></span> 
<img src="" width="200px" height="200px" /> 
<span id="test"><h1></h1></span> 
</span>

#test { 
position: relative; 
height: 200px; 
width: 200px; 
text-align: center; 
display: block; 
}

давая вышеуказанные правила CSS ... помещает текст в невидимом/прозрачный блок .. потому что мы не объявляем никакого значения фонового цвета. таким образом, все 3 блока становятся равными по размеру .. 200px на 200px .. бок о бок в одной строке.

источник

2014-09-06 17:53:26

Место установки: исправлена; от hypetop и hypebot. Это заставило эти элементы иметь фиксированные позиции, а не относительно изображения.

источник

2014-09-06 17:54:27

Как выровнять изображение между текстом?

ответ

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