HTML и CSS-центрирование текста и изображения вместе

126
15

Я вхожу в область веб-дизайна, и для практических целей я пытаюсь создать отзывчивые веб-сайты HTML и CSS, смоделированные после реальных веб-сайтов, поэтому я беспокоюсь только о разработке, а не о дизайне. На данный момент я перепроектирую apple.com. Моя проблема заключается в том, что в навигационной панели apple.com логотип Apple находится примерно в дюйме от ссылок на другие части сайта. По мере изменения размера браузера он остается примерно на расстоянии в дюйм. Проблема в том, что на моей (незавершенной) версии сайта логотип Apple остается фиксированным в одной позиции при изменении размера браузера.

Вот мой код:

html {
font-size: 100%;
}

body {
padding: 0;
margin: 0;
}

@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

.font {
font-family: San Francisco;
}

.logo {
position: absolute;
left: 5em;
top: .5em;
}

.center {
display: inline;
text-align: center;
}

.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}

header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}

.ul-header {
margin: .8em;
}

.li-header {
display: inline;
}

.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}

.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}

.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}

.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}

@media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header"><a href="#" class="a-header">Mac</a></li>
<li class="li-header"><a href="#" class="a-header">iPad</a></li>
<li class="li-header"><a href="#" class="a-header">iPhone</a></li>
<li class="li-header"><a href="#" class="a-header">Watch</a></li>
<li class="li-header"><a href="#" class="a-header">TV</a></li>
<li class="li-header"><a href="#" class="a-header">Music</a></li>
<li class="li-header"><a href="#" class="a-header">Support</a></li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>

</html>

Кто-то предложил это решение: как горизонтально центрировать <div> в другом <div>? Проблема в том, что я пытаюсь понять, как работать с различиями между изображениями и текстом, чтобы центрировать их, поэтому просто бросать их в div не получится.

Я попытался помещать текст и изображение в div и центрировать его, значения%, возиться с свойством отображения и некоторые другие вещи, но ничего не работает.

Я также являюсь новичком в сети, поэтому, если что-нибудь еще я должен исправить, не стесняйтесь, дайте мне знать. Спасибо, Lyfe

спросил(а) 2021-01-25T15:16:01+03:00 5 месяцев назад
1
Решение
109

Запустите элемент проверки на странице Apple, и вы увидите, что они помещают свое изображение в качестве другого элемента списка. Вы, с другой стороны, размещаете его вне своего списка.

Вот ваш код, с логотипом Apple, размещенным в качестве первого элемента списка:

<ul class="ul-header">
<li class="li-header"><a href="#" class="a-header"><img src="apple_logo.png" width='20px'></a></li>
<li class="li-header"><a href="#" class="a-header">Mac</a></li>
<li class="li-header"><a href="#" class="a-header">iPad</a></li>
<li class="li-header"><a href="#" class="a-header">iPhone</a></li>
<li class="li-header"><a href="#" class="a-header">Watch</a></li>
<li class="li-header"><a href="#" class="a-header">TV</a></li>
<li class="li-header"><a href="#" class="a-header">Music</a></li>
<li class="li-header"><a href="#" class="a-header">Support</a></li>
</ul>

enter image description here

РЕДАКТИРОВАТЬ

Чтобы логотип Apple выравнивался по вертикали вместе с другими элементами в вашем списке, добавьте это в свой CSS:

#app_logo {
margin-top: -10px;
}

.center ul img {
vertical-align: middle;
}

Примечание. Я добавил идентификатор изображения. Кроме того, ваши настройки могут быть немного разными.

enter image description here

ответил(а) 2021-01-25T15:16:01+03:00 5 месяцев назад
45

если мы действительно посмотрим на CSS и HTML на странице apple, вот как вы это делаете:

HTML:

<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>

CSS:

@media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}

.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}


Комментарий:

Я бы поспорил

позиция: абсолютная;

трюк, однако, я вырезал выделение кода webkit. Если вы хотите сделать страницу с динамической страницей/отзывчивой, вам нужно изучить библиотеку Bootstrap, она честно супер проста в использовании и для начала использования. Делает все динамичным и отзывчивым.

ответил(а) 2021-01-25T15:16:01+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема