Question

这是我的代码

header img{
	width:10%;
	vertical-align: middle;
}
header h1{	
	text-align: right;
	display:inline;
	position: absolute;
}
header {
	width : 100%;
	height: 1% ;
	background: red;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href = "css\main.css" >
    <link rel="stylesheet" href="css\responsive.css">
</head>
<body>
    <header>
    <div class = "container-fluid">
    <img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt="">
    <h1>KUNAL MEHTA</h1>
    </div>
    </header>
    <section>
    
    </section>
    <footer>
    
    </footer>

    <script src = "js/main.js"></script>

</body>
</html>

我所说的是我希望h1向右移动并且它们都应该在父元素的中心对齐。我正在使用BOOTSTRAP，因此鼓励使用bootstraps的答案

Answer 1

嗯，你可以随时使用flex - 我真的建议使用它，因为它使解决方案更清洁，更容易维护。请注意我只需要更改容器元素来制作此解决方案，并清理h1边距。

.container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px
}

.container-fluid h1 {
  margin: 0
}

header {
    background: red;
}

header img{
    width:10%;
}

您可以阅读更多相关信息here

标题和图像未在标题中对齐

1 个答案: