时间戳

首页 > 解决方案 > 为什么图像不会直接移动到网页的中心（不是中间）

html - 为什么图像不会直接移动到网页的中心（不是中间）

问题描述

所以，我尝试使用“text-align：center”属性，但似乎没有任何帮助，图像稍微偏离中心（实际上很多），它的 png 文件所以我不确定可能是什么问题。我在处理不同的项目时也遇到过这个问题，我真的找不到解决方案。我可能在我的代码中犯了一个巨大的重大错误，所以如果你注意到请告诉我。确保在整页中运行它，以便您看到问题！ 继承人的 HTML 和 CSS：

body {
    background-color: #161616;
}
header {
    height: 3.375rem;
}
.ul1 {
    list-style: none;
    float: right;
}
li {
    display:inline;
    color: white;
    margin: 0.625rem;
    position: relative;
    right: 0.625rem;
}

a {
    text-decoration: none;
    color:white;
    font-size: 1.063rem;
    font-family: 'Prompt', sans-serif;
}

.img-1 {
   display: block;
   text-align: center;
   padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap" rel="stylesheet">    
    <title>project1</title>
</head>
<body>
<header>
    <nav>
        <ul class="ul1"> 
            <li><a href="https://duckduckgo.com/about"target="_blank">About</a></li>
            <li><a href="https://duckduckgo.com/hiring"target="_blank">Work</a></li>
            <li><a href="https://twitter.com/duckduckgo"target="_blank">Contact us</a></li>
        </ul>
    </nav>
</header>

<section class="pre-midpage">
    <div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>

标签： htmlcss

解决方案

您div.img-1没有采取 100% 的可能width。事实上它需要50%. 发生这种情况是因为您没有清除float: leftfrom .ul1，您可以clearfix按照说明添加duplicated post或使用display: flexandjustify-content: flex-end;代替：

body {
    background-color: #161616;
}
header {
    height: 3.375rem;
}
.ul1 {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
li {
    display:inline;
    color: white;
    margin: 0.625rem;
    position: relative;
    right: 0.625rem;
}

a {
    text-decoration: none;
    color:white;
    font-size: 1.063rem;
    font-family: 'Prompt', sans-serif;
}

.img-1 {
   text-align: center;
   padding: 0px;
}

.img-1 > img {
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap" rel="stylesheet">    
    <title>project1</title>
</head>
<body>
<header>
    <nav>
        <ul class="ul1"> 
            <li><a href="https://duckduckgo.com/about"target="_blank">About</a></li>
            <li><a href="https://duckduckgo.com/hiring"target="_blank">Work</a></li>
            <li><a href="https://twitter.com/duckduckgo"target="_blank">Contact us</a></li>
        </ul>
    </nav>
</header>

<section class="pre-midpage">
    <div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>

推荐阅读