выравнивание блока по центру

317

07 марта 2017, 14:02

Помогите, пожалуйста, что-то всю голову сломал, без текста получается все ровно, но если добавить текст в блок, то ерунда полная. Имеется следующая HTML-разметка страницы и изображение logo.gif:

<body>
  <div>SEO-продвижение и оптимизация сайтов</div>
</body>

Необходимо с помощью каскадных таблиц стилей сделать, чтобы этот блок (div) находился по центру окна браузера, имел фиксированный размер 300×300px, изображение (logo.gif) было выровнено по центру блока, а текст в блоке — по левому краю.

Answer 1

<style>
.centered {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    width:300px;
    height: 300px;
    background-image: url("some.gif");
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
</style>
<div class = "centered">
    <div class = "text">SEO-продвижение и оптимизация сайтов</div>
</div>

Если я правильно понял задачу, возможно так вы ее решите

Answer 2

Из того что вы описали, могу посоветовать сделать <div aligh="center">, это выровняет по центру. Для изображения добавить тоже aligh="center". А с помощью CSS и width,height указать размеры.

div { 
  height: 300px; 
  width: 300px; 
}

Answer 3

Как я понял, это что-то типа такого

.is_block { 
	position: absolute; 
  top: 50%; 
  left: 50%; 
  margin: -150px 0 0 -150px; 
  width: 300px; 
	height: 300px; 
  text-align: center; 
  z-index: 100; 
	background: #bfbfbf; 
} 
 
.text { 
  text-align: left; 
}

<div class="is_block"> 
  <div class="text"> 
    Тут текст 
  </div>  
  <img src="https://pp.userapi.com/c637425/v637425814/56e4f/bpfrax9-1cw.jpg" width="100" height="100"> 
</div>