时间戳

首页 > 解决方案 > 如何对齐我的文本我的 1400 像素宽的标题导致问题

html - 如何对齐我的文本我的 1400 像素宽的标题导致问题

问题描述

我正在使用 1400 像素的标题（我的图像宽度的大小）。由于我的标题，我的以下文本没有显示而不是我的页面

body {
  background-color: blue;
}

.infos {
  display: flex;
  justify-content: center;
  color: white;
}

header {
  width: 1400px;
  height: 787px;
  background-color: black;
}
<link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
  <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
    iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
    ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>

我试过flex，文本对齐。无事可做 我无法将文本置于页面中间

标签： htmlcss

解决方案

如果要将每一行文本居中到父元素的中心，请使用

文本对齐：居中

body {
  background-color: blue;
}

header {
  width: 1400px;
  height: 787px;
  background-color: black;
}

.infos {
  text-align: center;
}
<link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
  <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
    iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
    ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>

使用边距使 div 居中的最简单方法：自动

body {
  background-color: blue;
}

header {
  width: 1400px;
  height: 787px;
  background-color: black;
}

.infos {
  width: 50%;
  margin: auto;
}
<link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
  <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
    iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
    ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>

推荐阅读