Не может центрировать окно - Глупый вопрос?

Я пытаюсь получить 3x ссылки в divs в центр под названием «Подробнее».Не может центрировать окно - Глупый вопрос?

Я пробовал маржу: Авто, ширина 33%, выравнивание текста: центр, и ничего не работает!

Может кто-то помочь мне, так как это сводило меня с ума!

Вот HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'> 
    <link rel='stylesheet' href='style.css'/> 
    </head> 
    <body> 
    <div class="header"> 
     <div class="container"> 
     <ul class="nav"> 
      <li> About </li> 
      <li> Work </li> 
      <li> Team </li> 
      <li> Contact </li> 
     </ul> 
     </div> 
    </div> 

    <div class="jumbotron"> 
     <div class="container"> 
     <div class="main"> 
      <h1>We are Broadway</h1> 
      <a href"https://localhost:8000/" class="btn-main"> Get Started </a> 

     </div> 
     </div> 
    </div> 

    <div class="supporting"> 
     <a href""> Learn more </a> 
     <a href""> Learn more </a> 
     <a href""> Learn more </a> 
     <div class="container"> 
     <div class="col"> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg"> 
      <h2>Design</h2> 
      <p>Make your projects look great and interact beautifully.</p> 

     </div> 
     <div class="col"> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg"> 
      <h2>Develop</h2> 
      <p>Use modern tools to turn your design into a web site</p> 

     </div> 
     <div class="col"> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg"> 
      <h2>Deploy</h2> 
      <p>Use modern tools to turn your design into a web site</p> 

     </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

    <div class="footer"> 
     <div class="container"> 
     <p>&copy; Broadway 2015</p> 
     </div> 
    </div> 
    </body> 
</html>

Вот CSS:

html, body { 
    margin: 0; 
    padding: 0; 
} 

html { 
    background: url(http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.container { 
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 10px; 
} 

.jumbotron { 
    height: 800px; 
} 

.nav { 
    margin: 0; 
    padding: 20px 0; 
} 
.nav ul { 
    text-align: center; 
} 

.nav li { 
    color: #fff; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 800; 
    font-size: 12px; 
    display: inline-block; 
    padding: 40px; 
    text-align: center; 
    margin-left: 10%; 

} 

.nav li:hover { 
    color: #008080; 
    font-size: 14px; 
    font-weight: bold; 
} 

.main { 
    position: relative; 
    top: 180px; 
    text-align: center; 
} 

.main h1 { 
    color: #333; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    font-size: 70px; 
    margin-top: 0; 
    margin-bottom: 80px; 
    text-transform: uppercase; 
} 

.btn-main { 
    background-color: #333; 
    color: #fff; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    font-size: 18px; 
    letter-spacing: 1.3px; 
    padding: 16px 40px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

.supporting { 
    padding-top: 80px; 
    padding-bottom: 100px; 
} 

.supporting a { 
    background-color: #FFFFFF; 
    border-style: solid; 
    border-color: #333333; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    font-size: 14px; 
    letter-spacing: 1px; 
    padding: 12px 30px; 
    text-decoration: none; 
    text-transform: uppercase; 
    display: inline-block; 
    margin: 30px; 
    text-align: center; 
    width: 10%; 
} 
.supporting .col { 
    float: left; 
    width: 33%; 
    font-family: 'Raleway', sans-serif; 
    text-align: center; 
} 

.supporting img { 
    height: 32px; 
} 

.supporting h2 { 
    font-weight: 600; 
    font-size: 23px; 
    text-transform: uppercase; 
} 

.supporting p { 
    font-weight: 400; 
    font-size: 14px; 
    line-height: 20px; 
    padding: 0 50px; 
    margin-bottom: 40px; 
} 

.clearfix { 
    clear: both; 
} 

.footer { 
    background-color: #333; 
    color: #fff; 
    padding: 30px 0; 
} 

.footer p { 
    font-family: 'Raleway', sans-serif; 
    text-transform: uppercase; 
    font-size: 11px; 
} 

@media (max-width: 500px) { 
    .main h1 { 
    font-size: 50px; 
    padding: 0 40px; 
    } 

    .supporting .col { 
    width: 100%; 
    } 
} 

.header { 
    background-color: #333333; 
}

источник

2015-10-24 Jamie Bohanna

я сделал только один предмет, т.е. добавили 3x ссылки внутри другого элемента (рисунок) и применил этот элемент text-align:center

CSS:

.supporting figure { 
      text-align: center; 
     }

HTML:

<div class="supporting"> 
      <figure> 
       <a href""> Learn more </a> 
       <a href""> Learn more </a> 
       <a href""> Learn more </a> 
      </figure> 
      <div class="container">

источник

2015-10-25 05:05:40 Lahori

Вы ставите ссылки в отдельный DIV, а затем выравнивания текста, который div подобным образом:

<div class="lm-links"> 
    <a href""> Learn more </a> 
    <a href""> Learn more </a> 
    <a href""> Learn more </a> 
    </div>

CSS:

.lm-links { 
margin: 0 auto; 
text-align: center; }

источник

2015-10-24 22:41:49 zhack

ОК, думаю, у меня есть то, что вам нужно. Я должен был настроить несколько других вещей, чтобы заставить их всех выстраиваться в линию.

.supporting { 
padding-top: 80px; 
padding-bottom: 100px; 
position: relative; 
left: 200px; 
} 

.supporting img { 
height: 32px; 
position: relative; 
left: -210px; 
} 

.supporting h2 { 
font-weight: 600; 
font-size: 23px; 
text-transform: uppercase; 
position: relative; 
left: -210px; 
} 

.supporting p { 
font-weight: 400; 
font-size: 14px; 
line-height: 20px; 
padding: 0 50px; 
margin-bottom: 40px; 
position: relative; 
left: -210px; 
}

источник

2015-10-25 01:50:00 kfreeman04208

Не может центрировать окно - Глупый вопрос?

ответ

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