html - 如何将图像居中到我的标题左侧?
问题描述
我正在为一个学校项目制作一个 HTML 网站,我想将图像居中放在标题的左侧。通过标题,我的意思是说世界矢量控制的大事。我将图像向左浮动,但由于某种原因它只是停留在左上角。
body {
background-color: #252525;
margin: 0;
font-family: ultra;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: ultra;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2E86C1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #2E86C1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .search-container {
float: right;
}
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.navbar .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: ;
font-size: 17px;
border: none;
cursor: pointer;
}
.navbar .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.navbar .search-container {
float: none;
}
.navbar a,
.navbar input[type=text],
.navbar .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.navbar input[type=text] {
border: 1px solid #ccc;
}
}
.header {
background-color: #252525;
padding: 10px;
text-align: center;
color: blue;
margin 0;
}
h1 {
color: #2E86C1;
font-size: 60px;
font-family: ultra;
}
img {
float: left;
}
#rcorners1 {
margin: 50px auto;
padding-top: 100px;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
<div class="header">
<img src="Untitled-2.png" alt="M" width="80" height="80">
<h1>World Vector Control</h1>
</div>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">About</a>
<div class="dropdown">
<button class="dropbtn">
Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">The Problem</a>
<a href="#">The Solution</a>
</div>
</div>
<a href="#FAQ">FAQ</a>
<div class="dropdown">
<button class="dropbtn">
Contact Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Donate</a>
<a href="#">Get Invovled</a>
</div>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
<p id="rcorners1">Rounded corners!</p>
解决方案
看到 和 上有一些边距和填充div.header
,<h1>
一个简单的解决方案是使 的<img>
子级<h1>
,然后它将与 . 完全对齐<h1>
。
为了这个解释,删除了不必要的代码。
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
border:1px solid black;
padding: 10px;
text-align: center;
color: blue;
margin 0; }
h1 {
border:1px solid black;
color: #2E86C1;
font-size: 60px;
font-family: ultra;
position: relative;
}
h1>img {
border:1px solid red;
position: absolute;
left: 15px;
height:100%;
width:80px;
}
<div class="header">
<h1><img >World Vector Control</h1>
</div>
推荐阅读
- reactjs - 如何使用 Airtable.com reactjs 从一个页面导航到另一个页面
- c - 什么是函数指示符和实际调用?
- python - python作业调度-job()缺少1个必需的位置参数:'soup'
- design-patterns - 如何在 AWS-DMS 中提供弹性?
- codeigniter - 我收到以下错误;未定义的变量,在 codeigniter
- clang - 计算 clang::attr 的长度
- performance - 为什么 GKE 节点在没有 Pod 的情况下启动时的平均负载如此之高?
- python - 更新 django 静态文件中的图像文件
- .net - Hangfire Fire and Forget 作业有时会给出错误“不包含带有签名的方法”
- php - 如何使用 PHP 将 svg 转换为 png 和居中文本?