时间戳

首页 > 解决方案 > HTML CSS 居中整个站点

html - HTML CSS 居中整个站点

问题描述

我是 css、html 的新手，我正在为我叔叔的餐厅设计一个网站。我在 Adob​​e XD 中设计了我的第一个原型。然后我找到了一个叫 Avocode 的网站。我从那里使用了css代码。

.logo {
  position: absolute;
  top: 872px;
  left: 57px;
  width: 284px;
  height: 193px;
  z-index: +1;
}

然后我在 html 文档中使用了代码。

<div class="logo"><img src="logo.png" alt=""></div>

它工作得非常好，但我无法使网站居中。我应该怎么办？

标签： htmlcss

解决方案

使整个网站居中的一种常见的、公认的方法是使用该margin: auto;方法。

.content {
    width: 75%; /* Could be anything, but 75% works here. */
    margin: auto; /* This is what center the content div itself. */
    border: 1px solid red;
 }
 
 p {
     text-align: center; /* This will center the text inside the paragraph tag */
     border: 1px solid black;
 }
<html>
<head>
</head>
<body>
    <div class="content">
         <p>Here is some content!</p>
    </div>
</body>
</html>

目标是将所有内容包装到一个 div 中，然后将该 div 居中。这将允许您仍然在该 div 中操作对象的样式，但总体而言，整个文档将居中。

推荐阅读