Я работаю с мобильной версией этого сайта, и у меня возникла очень простая задача: центрировать ло go в заголовке. Я пытаюсь использовать flex, а затем justify-content:center;. Это "код":
<header>
<div class="container center-me">
<div class="responsive-logo"></div>
<div class="row">
<div class="align-items-center justify-content-center">
<nav>
<div class="logo-holder"></div>
<ul class="clearfix">
<li><a href="{% url 'index' %}">Home</a></li>
<li class="dot">.</li>
<li><a href="{{ Anthony.go_to_product_page }}" class="r_spacer">Anthony</a></li>
<li><a href="{{ Jackson.go_to_product_page }}">Jackson</a></li>
<li class="dot">.</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="hero"></div>
</header>
CSS:
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.pullcontainer a#pull { display: none; }
nav ul li a { color: #282f35; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
nav ul li a:hover { color: #838383; text-decoration: none; }
p { text-align: center; font-size: 14px; color: #848789; font-weight: 300; word-spacing: 2px; line-height: 1.8em; margin-top: 25px; }
p.text-intro { font-size: 18px; }
nav { height: 75px; margin-top: 30px; position: relative; }
.logo-holder { background: url(../img/main-logo.png) no-repeat center center; width: 114px; height: 105px; position: absolute; top: 0; left: 310px; }
.responsive-logo { display: hidden; }
header { background-color: #f4f5fc; font-family: 'Lato', sans-serif;}
header ul { padding-top: 35px; }
header ul li { list-style: none; float: left; text-transform: uppercase; letter-spacing: 2px; }
header ul li a { display: block; margin: 0 30px; color: #4d4959; }
.r_spacer { margin-right: 150px; }
.active{
width: 500px;
}
.image-item{
display: inline;
}
.image-item img{
cursor: pointer;
width: 100px;
}
.image-item img:hover{
border-bottom: 2px solid gray;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li{
margin: 0 1.75rem 0 0;
}
.d-flex .col-sm{
display: block;
}
.form-group label{
font-family: 'Lato', sans-serif;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
}
header{
position:relative;
display:block;
width:100%;
height: 10em;
}
.row .prev-price{
margin-left: .5em;
text-decoration: line-through;
}
.row .actual-price{
margin-top: 0;
}
.d-flex .container-fluid p{
font-family: 'Lato', sans-serif;
font-weight: 200;
letter-spacing: 2px;
}
.container h1{
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
.container .prev-price{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 90%;
}
.container .actual-price{
letter-spacing: 7px;
font-weight: 400;
}
.buy-btn {
margin-top: 220px;
font-family: 'Lato', sans-serif;
background-color: black;
border: solid 1px #bbb;
padding: 15px 50px;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 400;
}
.buy-btn:hover, .buy-btn:focus {
color: white;
text-decoration: none;
transition: 1s;
background-color: rgb(44, 44, 44);
}
@media screen and (max-width:640px){
*{
max-width: 100%;
}
.responsive-logo { background: url(../img/responsive-logo.png) no-repeat center center; width: 110px; height: 44px; position: absolute; left: 10px; align-self: center; justify-self: center; }
.center-me{
display: flex;
align-items:center;
justify-content: center;
}
.pullcontainer{
display: none;
}
#div_id_quantity{
display: flex;
}
#div_id_quantity > label{
margin-top: .5rem;
margin-right: .5rem;
}
.col-sm::before{
content: 'Jackson';
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 30px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin:30px 10px
}
header{
height:100%;
}
.responsive-logo{
width: 30px;
}
.d-flex{
flex-direction: column;
width: 100%;
}
.container{
display: flex;
padding:0!important;
width: 100%;
margin-right: 0;
margin-left: 0;
}
.image-list{
display: flex;
justify-content: space-evenly;
}
.col-sm{
margin:0;
padding:0;
}
.col{
padding: 0!important;
min-height: 120px;
}
.row{
height: 100%;
justify-content: center;
margin-left: .5rem!important;
}
.button-wrapper{
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
align-items: baseline;
justify-items: center;
padding: 1.5rem;
z-index: 99;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-content: center;
position: fixed;
width: 100%;
max-width: 100%;
background-color: #f4f5fc;
}
.buy-btn{
border-radius: 10px;
margin: 0!important;
font-size: 15px;
font-weight: 400;
letter-spacing: 3px;
}
.image-item img{
width: 75px;
}
.active{
width: 375px;
}
.container-fluid{
margin-top: .7rem;
justify-content: center;
}
.container-fluid h1{
display: none;
}
}
Заголовок меня очень смущает: без указания высоты он будет установлен на 0, и если я удалите строку внутри, она также будет установлена в 0. И вдобавок к основной проблеме, div с lo go не будет центрироваться сам по себе ... Пожалуйста, дайте мне знать, если я не достаточно ясны или отсутствует какой-то код. Я новичок в этом. Заранее спасибо!