html 如何使用CSS在文本中添加空间< div>当填充不按预期工作时

xa9qqrwz 于 2023-10-14 发布在其他

关注(0)|答案(4)|浏览(112)

我试图调整<div>在另一个元素中的位置，但似乎填充没有达到预期的效果。
我如何定位我的文本以与下图中的红线对齐？出于某种原因，衬垫似乎不起作用。谢谢你，谢谢！
我正在尝试定位文本，如下图所示，与红线对齐：

超文本标记语言：

<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

CSS：

.hero{
 background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
title{
padding: px 20px;
 display:table-cell;
vertical-align:middle;
font-size: 19px;
}

Html

来源：https://stackoverflow.com/questions/41586184/how-to-add-space-on-text-inside-div-using-css-when-padding-not-working-as-expe

4条答案

按热度按时间

ruyhziif1#

title是一个类，所以css选择器将以。和正确的填充语法。

.title{
  padding: 40px;
 display:table-cell;
 vertical-align:middle;
 font-size: 19px;
}

.hero{
 background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
body{
  margin: 0;
  /*
  font-family: 'Varela Round', sans-serif;
  */
   font-family: 'Roboto', sans-serif;

}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
padding: 40px;
display:table-cell;
vertical-align:middle;
font-size: 19px;
}

Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

赞(0）回复(0）举报 2023-10-14

jum4pzuy2#

css语法错误padding: px 20px class name add .title

.title{
 padding: 10px 20px;
 display:table-cell;
 vertical-align:middle;
 font-size: 19px;
}

赞(0）回复(0）举报 2023-10-14

xvw2m8pv3#

您需要设置.title的高度，使文本垂直居中。

.hero{
  background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
body{
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
  padding: 0 20px;
  height: 80vh;
  display:table-cell;
  vertical-align: middle;
  font-size: 19px;
}

<!-- 
Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

这里还有一个解决方案，其中.hero设置为table-cell，因此.title需要定义的属性较少。

.hero{
  background-color:#5FCF80;
  height: 80vh;
  width: 100vw;
  display:table-cell;
  vertical-align: middle;
  margin: 0;
}
body{
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
  padding: 20px;
  font-size: 19px;
}

<!-- 
Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

赞(0）回复(0）举报 2023-10-14

jjjwad0x4#

这里有一个更完美的解决方案。

.hero{
  position:relative;
  background-color:#5FCF80;
  height: 80vh;
  display:block;
}
.hero .title{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
 }

赞(0）回复(0）举报 2023-10-14

我来回答

html 如何使用CSS在文本中添加空间< div>当填充不按预期工作时

4条答案

相关问题

热门标签

最新问答