将div徽标与CSS对齐

问题描述 投票：0回答：4

我正在使用该网站的移动版本，并且我坚持一个非常简单的任务：将徽标居中于标题中心。我正在尝试使用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。最重要的是，回到主要问题，即徽标不会自动居中...如果我不够清楚或缺少一些代码，请告诉我。我是新手。预先感谢！

html css flexbox
4个回答
1
投票

从position: absolute; left: 10px;中擦除.responsive-logo！父级的flex设置足以使徽标容器居中。

0
投票

避免过多的代码。尝试添加此代码：

.logo-holder{ align-items: center;justify-content:center;display:flex;}
0
投票

只需将display: flex;和justify-content: center;添加到<nav>元素中

查看此 JSFiddle

@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;
	display: flex;
	justify-content: center;
}

.logo-holder {
	background: url(../img/main-logo.png) no-repeat center center;
	width: 114px;
	height: 105px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-90px);
}

.logo-holder>img {
	width: 100%;
}

.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;
	}
}
<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">
                          <img src="https://via.placeholder.com/150x50" alt="">
                        </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>
-1
投票

omg ...尝试写得更简单...我知道的是，当您使用flexbox时，应将样式应用于父项，然后将样式进一步应用于样式。尝试编写display：Flex; jutsify-content：作为其徽标父级的div的中心

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.