如何将正文定位在 CSS 导航栏对面的中间，将徽标定位在左侧？答案

【问题标题】：How can I position a body of text to be in the middle and the logo, to the left side across from the nav bar in CSS?如何将正文定位在 CSS 导航栏对面的中间，将徽标定位在左侧？
【发布时间】：2019-04-02 11:01:08
【问题描述】：

我很难练习，无法解决这个问题来挽救我的生命。 7小时试图找到解决方案无济于事！什么都不会让步。

我只是希望文本像这个站点或这个站点a link 一样位于中间。我想要一个带有文字的不透明黑框，而不是全白。我的文字到处都是。左侧的徽标和右侧的导航栏/菜单。 https://imgur.com/a/1oCKaco 链接到代码。 https://codepen.io/admitdefeat/pen/BEyMzK

HTML

<div class="post-body">
  <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>
</div>

CSS

post-body{    
  padding-top: 3rem;
  position: relative;
  box-sizing: inherit;
}
div {
  display: block;
}

谢谢。

我看过有关如何定位、div、容器的视频，并尝试将信息放在一起。但是，有些东西我不明白。

我希望页面对齐和定位。

【问题讨论】：

标签： html css css-position text-alignment

【解决方案1】：

不要紧张，如果您希望菜单始终位于右上角，只需给它一些规则：

`#menu{
    position: fixed;
    right: 5px; /* or the amount you want */
    top: 5px; /* or the amount you want */
}`

在徽标上应用相同的逻辑，最后添加 text-align: center; 以使您的文本在页面中居中，瞧！

【讨论】：

非常感谢！它不会完全进入左上角，但你知道为什么这张图片不会低于文字吗？imgur.com/a/vFfeS0u

【解决方案2】：

在您的.post-body 类中，删除padding-top: 3rem 和position: relative，因为它们会弄乱您的格式。然后添加text-align: center 使页面中的文本居中，并添加margin: 100px 20% 限制文本的定位。您可以将这两个值更改为您想要的任何值，具体取决于您的目标定位。第一个值 (100px) 是您希望文本从顶部开始的距离（y 轴），第二个值 (20%) 是您希望文本距离左右边缘的距离（x-轴）。

请注意，使用 % 值作为第二个值将根据屏幕大小为您动态调整文本大小。在这种情况下，无论您使用什么设备，它始终是屏幕大小的 20%。

  body {
  font-family: "Basier";
  font-size: 20px;
}

html {
  background: url(summer.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.post-body {
  box-sizing: inherit;
  text-align: center;
  margin: 100px 20%;
}

div {
  display: block;
}

@font-face {
  font-family: "Basier";
  src: url("basiersquare-regular-webfont.ttf");
}

.logo {
  width: 150px;
  height: 140 px;
}


/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: left;
  margin-right: 0 px;
}


/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Basier";
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

li:hover a {
  background: #F4D03F;
}


/*Style for dropdown links*/

li:hover ul a {
  background: #F4D03F;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: f1c40f;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}


/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}


/*Display the dropdown on hover*/

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Basier";
  text-decoration: none;
  color: #F4D03F;
  background: #F4D03F;
  text-align: center;
  padding: 10px 0;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CLT Designs</title>
  <link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
  <meta charset="utf-8">
  <link href="designs.css" rel="stylesheet">
</head>

<body>

  <img class="logo" src="clt.png" alt="logoclt">

  <h2> RENOVATION PROJECT</h2>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
      <a href="Services.html">Services</a>
      <ul class="hidden">
        <li><a href="#">What is Design + Build?</a></li>
        <li><a href="#">Our Process</a></li>
      </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>

  <div class="post-body">
    <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>

  </div>

</body>

</html>

【讨论】：

【解决方案3】：

我试过用绝对和相对定位来做，希望这能解决你的问题。我只是稍微修改了你的代码。

检查此代码笔 https://codepen.io/jls314/pen/oOgVGz

您希望徽标位于左侧，导航栏位于右侧，因此我将它们放在标题标签中并定位它们。

<header>
    <img class="logo" src="clt.png" alt="logoclt">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
    <a href="Services.html">Services</a>
  <ul class="hidden">
    <li><a href="#">What is Design + Build?</a></li>
    <li><a href="#">Our Process</a></li>
  </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
</header>

这是 CSS：

header {
    position: relative;
}

.logo {
    position: absolute;
    left: 10px;
    width: 150px;
    height: 140px;
    float: left;
}
#menu {
    position: absolute;
    right: 10px;
}

.post-body{    
    position: relative;
    top: 200px;
    box-sizing: inherit;
    width: 50%;
    margin: 0px auto;
    background: rgba(0,0,0,.7);
    color: white;
}

【讨论】：

非常感谢！你真的只是在 2 秒内帮助了我。你知道为什么这张图片不会低于文字吗？imgur.com/a/vFfeS0u 我试过浮动，底部但没有用。codepen.io/admitdefeat/pen/BEyMzK
不知道有没有float:bottom 我觉得只有左边或者右边。但在 CSS 代码中，徽标已经处于绝对定位，距离左侧 10px。
你想让图片放在哪个文字上面？
我的意思是对齐中间，底部，对不起，我打开了 50 个标签，哈哈。它增加了我的困惑。我希望图像位于文本下方。但是不起作用
将您的图像分配给名为 below_text 的类或您想要定义的任何内容。 <img class="below_text"> 然后尝试使用您的 CSS 代码对其进行样式设置和定位 .below_text{}