Комплексное выравнивание изображений

-2

Я пытаюсь выровнять 3 изображения на странице приветствия веб-сайта.Комплексное выравнивание изображений

Логотип компании (500 * 500) должен быть центрирован горизонтально и вертикально независимо от размера страницы.

С правой и левой сторон основного логотипа у меня есть 2 флажка (96 * 96), которые указывают, на каком языке на сайте будет перенаправлен пользователь.

Хотелось бы, чтобы горизонтальный центр логотипов был центрирован, хотя они не имеют одинакового вертикального размера (500 для основного логотипа и 96 для флагов), как если бы была горизонтальная линия, проходящая через среди всех из них.

Большое спасибо за вашу помощь

источник

2013-10-07 Jean-Charles Huillier

если у вас есть попытка, пожалуйста, поделитесь своим кодом в jsfiddle – falguni

что вы пробовали ??? –

CSS

#horizon { 
display: block; 
height: 1px; 
left: 0; 
overflow: visible; 
position: absolute; 
text-align: center; 
top: 50%; 
width: 100%; 
} 

#content { 
height: 500px; 
left: 50%; 
margin-left: -250px; 
position: absolute; 
top: -250px; 
width: 500px; 
}

Я использую этот фрагмент кода в течение многих лет, в основном это позиционирует #content в абсолютном центре страницы (очевидно, цифры нужно будет массировать для вашего приложения).

После этого добавлены два дополнительных изображения с обеих сторон, которые должны быть прямыми. , ,

источник

2013-10-07 10:22:10

Хорошо, получилось, спасибо, за мою информацию, что такое использование горизонта, так как он не привыкает, не так ли? –

Теперь я задумываюсь об этом (я скопировал этот код со старого моего сайта), изначально #content сидел в #horizon, чтобы достичь вертикального центрирования, а также горизонтального ... –

Ах, вы могли бы быть более конкретным, я действительно strating с помощью CSS и я чаще потерял что-нибудь еще :)

На данный момент у меня это ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta keywords="lamera", "h-racing", "gentleman driver", "course", "endurance" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width" /> 
<title>H-Racing</title> 
<style type="text/css"> 
body { 
background-image: url(/images/fond.png); 
background-repeat: repeat; 
} 
.horizon { 
display: block; 
height: 1px; 
left: 0; 
overflow: visible; 
position: absolute; 
text-align: center; 
top: 50%; 
width: 100%; 
} 
.contentlogo { 
height: 500px; 
left: 50%; 
margin-left: -250px; 
margin-top: 250px; 
position: absolute; 
width: 500px; 
} 
.contentflagfr { 
height: 96px; 
left: 50%; 
margin-left: -446px; 
margin-top: 452px; 
position: absolute; 
width: 96px; 
} 
.contentflaguk { 
height: 96px; 
left: 50%; 
margin-left: 350px; 
margin-top: 452px; 
position: absolute; 
width: 96px; 
} 
</style> 
</head> 
<body> 
<a href="/fr/index.php"><img src="../images/france.png" align="left" class="contentflagfr"/></a> 
<img src="/images/logo.png" class="contentlogo"/> 
<a href="/en/index.php"><img src="../images/uk.png" align="right" class="contentflaguk"/></a> 
</body> 
</html>

источник

2013-10-08 20:52:38

Комплексное выравнивание изображений

ответ

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