Абсолютное позиционирование по центру

@rodgerfox · Регистрация: 19.06.2012

Author24 — интернет-сервис помощи студентам

Доброй ночи, не поделитесь интересными решениями разместить элемент по середине (горизонтали) родителя, имея абсолютное позиционирование, а сам родитель резиновый по ширине?
Еще лучше если сам абсолютный элемент резиновый.

@Valiant · 18.02.2013, 07:10

HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
 
div {
    width: 30%;
    background-color: blue;
    position: absolute;
    top:50%;
    left: 50%;
    margin:-100px 0 0 -15%;
    line-height: 200px;
}
 
span {
    display: inline-block;
    color:#fff;
    font: normal 10px/12px arial;
    vertical-align: middle;
    text-align: center;
    background-color: red;
    word-break: break-all;
}
 
 </style>
 
</head>
 
<body>
<div id="block">
    <span>Lorem ipsum LoremLorem ipsum LoremLorem ipsum Lorem</span>
</div>
 
</body>
 
</html>

@rodgerfox · 20.02.2013, 05:44 **[ТС]**

И что это? А вот если спан сам с абсолютным позиционированием?

@Valiant · 20.02.2013, 08:03

Представь что резиновый родитель это боди, элемент по середине имеет абсолютное значение, а внутри дива нет никакого спана

@rodgerfox 4 / 4 / 3 Регистрация: 19.06.2012 Сообщений: 99
		1
	Абсолютное позиционирование по центру 18.02.2013, 04:36. Показов 2672. Ответов 3 Метки нет (Все метки) Доброй ночи, не поделитесь интересными решениями разместить элемент по середине (горизонтали) родителя, имея абсолютное позиционирование, а сам родитель резиновый по ширине? Еще лучше если сам абсолютный элемент резиновый. 0

@rodgerfox 4 / 4 / 3 Регистрация: 19.06.2012 Сообщений: 99
	20.02.2013, 05:44 [ТС]	3
	И что это? А вот если спан сам с абсолютным позиционированием? 0

@Valiant 39 / 39 / 1 Регистрация: 12.02.2013 Сообщений: 177
	20.02.2013, 08:03	4
	Представь что резиновый родитель это боди, элемент по середине имеет абсолютное значение, а внутри дива нет никакого спана 0