1. дома
  2. Вопрос и ответ
  3. Проблемы с центрированием элементов на странице

Проблемы с центрированием элементов на странице

2017-02-15 2 views
1

новичок в HTML & CSS здесь, всего 2 недели обучения под моим поясом. Я пытаюсь реплицировать веб-страницу Google, и хотя мне удалось центрировать логотип Google и панель поиска под ним, я сделал это, используя свойства margin-top и margin-left. Я попробовал margin: 0 auto; с некоторыми другими свойствами, но не мог заставить ничего работать. Время, когда мне удалось центрировать логотип с использованием разных свойств, он не был полностью центральным на странице. В основном, я говорю, что способ, которым я это сделал, работает, но я знаю, что это не самый эффективный способ сделать эти два элемента центральными на странице, и это, безусловно, не представляет собой отзывчивую веб-страницу.Проблемы с центрированием элементов на странице

Не могли бы вы взглянуть на код, который я наклеил ниже, и предложить совет по наилучшему пути к этому? Я включил весь код HTML и CSS, если кто-то захочет загрузить сайт в блокнот и т. Д. Большое спасибо заранее!

<!DOCTYPE html> 

    <head> 
    <title>Google</title> 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
    </head> 

    <body> 
    <div class="nav"> 
     <ul> 
     <li id="sign-in">Sign in</li> 
     <li id="grid-list"> 
      <center><img src="grid-list.jpg"/></center> 
     </li> 
     <li id="images">Images</li> 
     <li id="gmail">Gmail</li> 
     </ul> 
    </div> 
    <div class="main"> 
     <img src="logo.jpg" alt="Google"/> 
     <p id="searchbar"></p> 
    </div> 
    </body> 


* { 
    box-sizing: border-box; 
} 

div.nav li { 
    display: inline-block; 
    font-family: Helvetica; 
    font-size: 13px; 
    width: auto; 
    float: right; 
    color: #414042; 
} 

#gmail { 
    margin-right: 15px; 
    margin-top: 7px; 
    padding: 0; 
} 

#images { 
    margin-right: 22px; 
    margin-top: 7px; 
    padding: 0; 
} 

#sign-in { 
    margin-right: 22px; 
    padding: 7px 13px; 
    background-color: #1789E8; 
    color: white; 
    border-radius: 2px; 
    font-weight: bold; 
    height: auto; 
    text-align: center; 
} 

#grid-list { 
    margin-right: 22px; 
    margin-top: 7px; 
} 

.main img { 
    margin-left: 536px; 
    margin-top: 182px; 
} 

#searchbar { 
    border: 1px solid #E8DAEB; 
    border-radius: 2px; 
    padding: 0; 
    text-align: center; 
    margin-left: 390px; 
    margin-right: 375px; 
    margin-top: 21px; 
    height: 46px; 
    width: 585px; 
}

источник

2017-02-15 Anonymous

+1

Возможные дубликат [Горизонтально центр div в div] (http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div). Сотни вопросов о SO и в Интернете о том, как к центрам. Вы, кажется, недооцениваете некоторые основы CSS. – Rob

+0

Я знаю, что я, вероятно, не очень эффективно использую свои div и ids, и мне также нужно лучше понять положение коробки, но я учусь. Начинаю окунуться в позиционирование родителя/ребенка ... практика практики практики! –

ответ

2

Для центрирования изображения можно использовать text-align:center; на родительский элемент. Для SearchBar вы можете использовать margin:0 auto; до тех пор, как панель поиска имеет определенную ширину:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
div.nav li { 
 
    display: inline-block; 
 
    font-family: Helvetica; 
 
    font-size: 13px; 
 
    width: auto; 
 
    float: right; 
 
    color: #414042; 
 
} 
 

 
#gmail { 
 
    margin-right: 15px; 
 
    margin-top: 7px; 
 
    padding: 0; 
 
} 
 

 
#images { 
 
    margin-right: 22px; 
 
    margin-top: 7px; 
 
    padding: 0; 
 
} 
 

 
#sign-in { 
 
    margin-right: 22px; 
 
    padding: 7px 13px; 
 
    background-color: #1789E8; 
 
    color: white; 
 
    border-radius: 2px; 
 
    font-weight: bold; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 

 
#grid-list { 
 
    margin-right: 22px; 
 
    margin-top: 7px; 
 
} 
 

 
.main { 
 
    padding-top:182px; 
 
    text-align:center; 
 
} 
 

 
#searchbar { 
 
    border: 1px solid #E8DAEB; 
 
    border-radius: 2px; 
 
    padding: 0; 
 
    text-align: center; 
 
    margin:21px auto 0; 
 
    height: 46px; 
 
    width: 585px; 
 
}
<!DOCTYPE html> 
 

 
    <head> 
 
    <title>Google</title> 
 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 

 
    <body> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li id="sign-in">Sign in</li> 
 
     <li id="grid-list"> 
 
      <center><img src="grid-list.jpg"/></center> 
 
     </li> 
 
     <li id="images">Images</li> 
 
     <li id="gmail">Gmail</li> 
 
     </ul> 
 
    </div> 
 
    <div class="main"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/> 
 
     <p id="searchbar"></p> 
 
    </div> 
 
    </body>

Для SearchBar вы должны использовать в input, а не p (пункт). Другим советом является то, что вместо определения margin-top, margin-right, margin-bottom, margin-left, вы можете использовать стенографию margin. Первое значение - это маржа top, затем right margin, затем bottom, затем left.

Если вы хотите top/bottom и right/left поля, чтобы быть таким же, соответственно, вы можете определить 2 значения (первое время top и bottom и второй будучи right и left). Если вы хотите, чтобы определить различные top и bottom запас, но используют один и тот же запас для left/right можно определить 3 значения (первое время top, второй будучи right/left и третий является bottom)

Например:.

margin-top:20px; 
margin-right:50px; 
margin-bottom:20px; 
margin-left:50px;

можно записать в виде

margin:20px 50px;

Или следующее:

margin-top:50px; 
margin-right:100px; 
margin-bottom:20px; 
margin-left:100px;

можно записать в виде:

margin:50px 100px 20px;

То же самое относится и к padding.

источник

2017-02-15 18:02:31 APAD1

+0

Большое спасибо за вашу помощь, подумайте, что теперь у меня есть голова! –

+0

Добро пожаловать. Добро пожаловать в SO! – APAD1

-1

вы не можете использовать пиксели для установки поля! вы должны установить запас основного класса до 50% от высоты страницы и ширины, как это: (для решения проблем изменить процент размера и края, чтобы соответствовать 100%)

* { 
 
    box-sizing: border-box; 
 
} 
 

 
div.nav li { 
 
    display: inline-block; 
 
    font-family: Helvetica; 
 
    font-size: 13px; 
 
    width: auto; 
 
    float: right; 
 
    color: #414042; 
 
} 
 

 
#gmail { 
 
    margin-right: 15px; 
 
    margin-top: 7px; 
 
    padding: 0; 
 
} 
 

 
#images { 
 
    margin-right: 22px; 
 
    margin-top: 7px; 
 
    padding: 0; 
 
} 
 

 
#sign-in { 
 
    margin-right: 22px; 
 
    padding: 7px 13px; 
 
    background-color: #1789E8; 
 
    color: white; 
 
    border-radius: 2px; 
 
    font-weight: bold; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 

 
#grid-list { 
 
    margin-right: 22px; 
 
    margin-top: 7px; 
 
} 
 

 
.main { 
 
    padding-top:50%; 
 
    padding-left:50%; 
 
} 
 

 
#searchbar { 
 
    border: 1px solid #E8DAEB; 
 
    border-radius: 2px; 
 
    padding: 0; 
 
    text-align: center; 
 
    margin:21px auto 0; 
 
    height: 46px; 
 
    width: 585px; 
 
} 
 
img{ 
 
    margin-left:50%; 
 
} 
 
html , body{ 
 
height:100%; 
 
width:100%; 
 
}
<!DOCTYPE html> 
 

 
    <head> 
 
    <title>Google</title> 
 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 

 
    <body> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li id="sign-in">Sign in</li> 
 
     <li id="grid-list"> 
 
      <center><img src="grid-list.jpg"/></center> 
 
     </li> 
 
     <li id="images">Images</li> 
 
     <li id="gmail">Gmail</li> 
 
     </ul> 
 
    </div> 
 
    <div class="main"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/> 
 
     <p id="searchbar"></p> 
 
    </div> 
 
    </body>

источник

2017-02-16 13:18:59 erfanr

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

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