文章/答案/技术大牛

发布

问HTML CSS使整个网站居中
EN

Stack Overflow用户

提问于 2019-01-31 20:39:20

回答 6查看 203关注 0票数 0

我是css，html的新手，我正在为我叔叔的餐厅设计一个网站。我用Adobe 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>

它工作得很好，但我不能将网站居中。我该怎么办？

html

css

回答 6

Stack Overflow用户

发布于 2019-01-31 20:45:50

一种常见的、公认的将整个网站居中的方法是使用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中对象的样式，但总体上整个文档将居中。

票数 0

Stack Overflow用户

发布于 2019-01-31 20:47:54

对我来说，我真的很喜欢在我的项目中使用CSS Grid。

如果你想使用CSS网格，你可以像这样居中：

#element{
    display: grid;
    justify-content: center; /* horizontal centering */
    align-content: center; /* vertical centering */
}

在一个示例中，它将如下所示。

.logo {
  display: grid;
  justify-content: center;
  align-content: center;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="logo">
    <img src="http://placekitten.com/300/300" alt="">
  </div>
</body>

</html>

票数 -1

Stack Overflow用户

发布于 2019-01-31 20:50:09

您可以轻松地将元素居中

CSS Flexbox

.container {
  height: 100vh;
  width: 100%;
  background-color: orangered;

  /* actually you need just these 3 properties specified below, the rest are for demo purposes */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container > p {
  padding: 1rem;
  background-color: #f7f7f7;
}

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

CSS网格

.container {
  height: 100vh;
  width: 100%;
  background-color: yellowgreen;
  
  /* These 3 properties will suffice */
  display: grid;
  justify-content: center;
  align-content: center;
}

.container > p {
  background-color: #f7f7f7;
  padding: 1rem;
}

<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

绝对定位

.container {
  height: 100vh;
  width: 100%;
  background-color: turquoise;
      
  /* Only display property will suffice */
  position: relative;
}

.container > p {
  background-color: #f7f7f7;
  padding: 1rem;
  
  /* These 4 properties are needed */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54460808

复制

相似问题

问HTML CSS使整个网站居中
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS使整个网站居中EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS使整个网站居中
EN