css 如何在每台设备上使页面上的元素居中？iPad、iPhone、台式机和任何其他设备

4dc9hkyq 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(116)

我的website's主页包含导航元素，导航下的社交媒体图标，以及一个位于导航元素顶部的标志。它在移动的上看起来很完美，但在桌面上有最糟糕的差距，而且

@font-face {
  font-family: IDIDNTSTEALTHIS;
  src: url(https://static.wixstatic.com/ufonts/617a47_069dbc8c08b34b95bda387f5d2f9b534/woff2/file.woff2);
}

html {
  height: 100%;
  width: 100%;
  font-family: 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: IDIDNTSTEALTHIS;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 130px);
  flex-shrink: 0;
}

header#SiteHeader {
  display: none;
}

.btm-nav {
  position: fixed;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  align-items: center;
  text-align: center;
}

.btm-nav i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: white;
  padding-top: 1px;
}

.btm-nav h1 {
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: IDIDNTSTEALTHIS;
  margin: -2px 0px 0px;
}

a,
:active,
:hover,
:visited {
  text-decoration: none;
}

.context-menu {
  display: none;
}

.menu-button {
  display: block;
  width: 100%;
  height: 25px;
  background-color: #000000;
  margin-bottom: 0;
  text-align: center;
  line-height: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 10px;
}

.menu-button:hover {
  background-color: #3E3E3E;
}

.social-media-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.social-media-button {
  flex-grow: 1;
  height: 40px;
  background-color: #0B0B0B;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  width: calc(25% - 1px);
  border: 1px solid #cecece;
  border-radius: 5px;
  margin-left: 2px;
}

.social-media-button:hover {
  background-color: #363636;
}

.social-media-button i {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.social-media-button i {
  color: #FFFFFF;
}

i.fa-brands.fa-discord {
  margin-top: 0px;
}

.btm-nav-1 {
  border-top-left-radius: 0px;
}

.btm-nav-1 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-2 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btm-nav-3 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-4 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.logo-container img {
  max-width: 134px;
  max-height: 89%;
}

.btm-nav-1,
.btm-nav-2,
.btm-nav-3,
.btm-nav-4,
.btm-nav-5 {
  flex-grow: 1;
  margin: 5px;
  background-color: #000;
  border: 0.05px solid #FFF;
  padding: 1px;
  width: 134px;
  height: 20px;
}

.btm-nav-1:hover,
.btm-nav-2:hover,
.btm-nav-3:hover,
.btm-nav-4:hover,
.btm-nav-5:hover {
  border: 2px solid #FFF;
  border-radius: 5px;
  padding: 0;
}

.social-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 12px;
}

.social-link {
  margin: 0px 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script async src="https://kit.fontawesome.com/56070a7eed.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="logo-container">
    <img class="syn-img" src="//cdn.shopify.com/s/files/1/0478/3144/9763/files/NEW-LOGO-WHITE_446478d2-abf7-4538-b217-fd695c815af8.png?v=1685297838" alt="Logo">
  </div>
  <div class="btm-nav">
    <div class="btm-nav-1">
      <a href="#" target="_blank">
        <h1>Button 1</h1>
      </a>
    </div>
    <div class="btm-nav-2">
      <a href="#" target="_blank">
        <h1>Button 2</h1>
      </a>
    </div>
    <div class="btm-nav-3">
      <a href="#" target="_blank">
        <h1>Button 3</h1>
      </a>
    </div>
    <div class="btm-nav-4">
      <a href="#" target="_blank">
        <h1>Button 4</h1>
      </a>
    </div>
    <div class="social-nav">
      <div class="social-link discordLink">
        <a href="#" target="_blank">
          <i class="fa-brands fa-discord" style="color: #ffffff;"></i>
        </a>
      </div>
      <div class="social-link instagramLink">
        <a href="#">
          <i class="fa-brands fa-instagram" style="color: #ffffff;"></i>
        </a>
      </div>
      <div class="social-link twitterLink">
        <a href="#">
          <i class="fa-brands fa-twitter" style="color: #ffffff;"></i>
        </a>
      </div>
      <div class="social-link tiktokLink">
        <a href="#">
          <i class="fa-brands fa-tiktok" style="color: #ffffff;"></i>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

在其他更大的屏幕上看起来更糟。我遇到的问题是差距越大，间隙越大。我不能对每一个屏幕宽度都进行媒体查询。必须有某种方法使用像flex这样的东西，或者不管你CSS魔术师怎么做。
我尝试添加max-width和min-width查询，以在10种不同的屏幕尺寸上手动调整logo和nav元素之间差距。所有这些显然都不起作用，因为我坐在这里问这个问题。

css

来源：https://stackoverflow.com/questions/76584644/how-do-i-center-elements-on-a-page-on-every-device-ipad-iphone-desktop-any

1条答案

按热度按时间

v8wbuo2f1#

考虑：

从.logo-container规则中删除height: calc(100vh - 130px);。这会导致高度与其包含的<img>的大小无关，并且如您所见，会导致较高视口上的较大间隙。
从.btn-nav中删除以下属性：

position: fixed;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);

此元素的固定位置意味着它不在文档的自然布局流中，并且与页面上的其他元素的位置无关。

将所有元素 Package 在另一个<div>中，然后用网格将其居中：

<body>
  <div class="container">
    …
  </div>
</body>

body {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

完整示例：

@font-face {
  font-family: IDIDNTSTEALTHIS;
  src: url(https://static.wixstatic.com/ufonts/617a47_069dbc8c08b34b95bda387f5d2f9b534/woff2/file.woff2);
}

html {
  height: 100%;
  width: 100%;
  font-family: 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: IDIDNTSTEALTHIS;
}

header#SiteHeader {
  display: none;
}

body {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
  
.btm-nav {
  width: auto;
  text-align: center;
}

.btm-nav i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: white;
  padding-top: 1px;
}

.btm-nav h1 {
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: IDIDNTSTEALTHIS;
  margin: -2px 0px 0px;
}

a,
:active,
:hover,
:visited {
  text-decoration: none;
}

.context-menu {
  display: none;
}

.menu-button {
  display: block;
  width: 100%;
  height: 25px;
  background-color: #000000;
  margin-bottom: 0;
  text-align: center;
  line-height: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 10px;
}

.menu-button:hover {
  background-color: #3E3E3E;
}

.social-media-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.social-media-button {
  flex-grow: 1;
  height: 40px;
  background-color: #0B0B0B;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  width: calc(25% - 1px);
  border: 1px solid #cecece;
  border-radius: 5px;
  margin-left: 2px;
}

.social-media-button:hover {
  background-color: #363636;
}

.social-media-button i {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.social-media-button i {
  color: #FFFFFF;
}

i.fa-brands.fa-discord {
  margin-top: 0px;
}

.btm-nav-1 {
  border-top-left-radius: 0px;
}

.btm-nav-1 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-2 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btm-nav-3 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-4 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.logo-container img {
  max-width: 134px;
  max-height: 89%;
}

.btm-nav-1,
.btm-nav-2,
.btm-nav-3,
.btm-nav-4,
.btm-nav-5 {
  flex-grow: 1;
  margin: 5px;
  background-color: #000;
  border: 0.05px solid #FFF;
  padding: 1px;
  width: 134px;
  height: 20px;
}

.btm-nav-1:hover,
.btm-nav-2:hover,
.btm-nav-3:hover,
.btm-nav-4:hover,
.btm-nav-5:hover {
  border: 2px solid #FFF;
  border-radius: 5px;
  padding: 0;
}

.social-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 12px;
}

.social-link {
  margin: 0px 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script async src="https://kit.fontawesome.com/56070a7eed.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="logo-container">
      <img class="syn-img" src="//cdn.shopify.com/s/files/1/0478/3144/9763/files/NEW-LOGO-WHITE_446478d2-abf7-4538-b217-fd695c815af8.png?v=1685297838" alt="Logo">
    </div>
    <div class="btm-nav">
      <div class="btm-nav-1">
        <a href="#" target="_blank">
          <h1>Button 1</h1>
        </a>
      </div>
      <div class="btm-nav-2">
        <a href="#" target="_blank">
          <h1>Button 2</h1>
        </a>
      </div>
      <div class="btm-nav-3">
        <a href="#" target="_blank">
          <h1>Button 3</h1>
        </a>
      </div>
      <div class="btm-nav-4">
        <a href="#" target="_blank">
          <h1>Button 4</h1>
        </a>
      </div>
      <div class="social-nav">
        <div class="social-link discordLink">
          <a href="#" target="_blank">
            <i class="fa-brands fa-discord" style="color: #ffffff;"></i>
          </a>
        </div>
        <div class="social-link instagramLink">
          <a href="#">
            <i class="fa-brands fa-instagram" style="color: #ffffff;"></i>
          </a>
        </div>
        <div class="social-link twitterLink">
          <a href="#">
            <i class="fa-brands fa-twitter" style="color: #ffffff;"></i>
          </a>
        </div>
        <div class="social-link tiktokLink">
          <a href="#">
            <i class="fa-brands fa-tiktok" style="color: #ffffff;"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何在每台设备上使页面上的元素居中？iPad、iPhone、台式机和任何其他设备

1条答案

相关问题

热门标签

最新问答