Центровка в CSSе

Anton Petrenko · August 4, 2007

Доброе время суток.

Интерисует вопрос:

Как с помощью СSS`а, отцентровать блок (таблица, картинка, я думаю не столь важно что) по горизонтали?

Насколько я понял в HTML`е аналог .

Также можна закрыть тегом

, но это не устраивает.

Также вопрос:

При сдвиге блока на определенное растояние по вертикали (top: 50px, к примеру) весь документ какбы смещается на 50 px вниз, образуя "градусники" на странице, использую position: absolute.

Общая картина:

Есть рамка (таблица с 1-ой строкой и столбцом), размером 700px * 100% по вертикали. Мне нужно чтобы рамка была отцентрирована по горизонтали, а также спущена на 50 пикселей вниз, от верхней стороны документа.

Пытался найти выход в

left: 25%

width: 50%, но как вы понимаете, с размером угадать сложно, а нужно именно 700 пикселей.

П.С. Перерыл весь учебник на данном сайте по CSS`у, найти не смог.

С ув. Антон.

rash · August 4, 2007

Для "рамки":

margin: 50px auto 0 auto;
width: 700px;

Anton Petrenko · August 4, 2007

Спасибо.

Еще вопрос: возможно ли как-то фон, начать не с начала страницы, а с отступом при background-repeat: repeat-y;?

Anton Petrenko · August 4, 2007

<html> 
<head> 
<title>...</title> 
<style type="text/css"> 

BODY 
{ 
 background-image: url('/....jpg'); 
 background-position: center top; 
 background-repeat: repeat-y; 
 background-color: black;
} 

DIV.lines 
{ 
 border-left: 10px solid red; 
 border-right:10px solid red; 
 position: absolute; 
 margin: 50px auto 0 auto; 
 width: 700px; 
 color: red; 
} 

</style> 
</head> 
<body> 

<div class="lines">...<div> 

</body> 
</html>

Написал пример, но суть проблемы тут видна.

Центровки блока в ввиде линия + текст + линия не произошло.

Возможно я где-то ошибаюсь.

kiD · August 5, 2007

вот тут вроде все как в сказке - по центру

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>(X)HTML+CSS код шаблона</title>
<style type="text/css">

body {
 margin:0;
 padding:0;
 height:auto !important;
 height:100%;
 min-height:100%;
}

.smb{
 line-height:6px;
 font-size:32px;
 font-weight:bold;
 color:#000;
}

.cvr{
 position:relative;
 left:4px;
 margin-right:8px;
 height:14px;
 background:#000;
}

.txt{
 position:absolute;
 display:table-cell;
 width:100%;
 text-align:center;
 color:#fff;
 font-size:12px;
 line-height:12px;
}

</style> 
</head>
<body>

<div style='border:1px solid #000; position:absolute; top:50%; left:0px; right:0px;'>

<div style='width:130px; margin:0px auto;'>
 <div class='smb' style='float:left;'>ο</div>
 <div class='smb' style='float:right;'>ο</div>
 <div class='cvr'></div>
</div>

</div>

<div style='width:130px; margin:10px auto 15px auto;'>
 <div class='smb' style='float:left;'>ò</div>
 <div class='smb' style='float:right;'>ó</div>
 <div class='cvr'><span class='txt'><tt>registration</tt></span></div>
</div>

</body>
</html>

если я правильно понял, вам нужно только position:absolute; top:50%; left:0px; right:0px;

Sign In

Центровка в CSSе

Question

Anton Petrenko

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

Anton Petrenko

Link to comment

Share on other sites

Anton Petrenko

Link to comment

Share on other sites

kiD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information