Question

HTML正文设置为text-alignment = center。我知道这不是最好的方法，我可能会在将来改变，因为这给我带来了很多麻烦，但我的整个网站都是基于此设计的，所以我现在不想改变这个设置。

我想让盒子居中，但是盒子里面的所有东西都设置为左边。此时盒子里面的所有东西也都设置在中心位置。即使框元素是text-aligment = left。

CSS：

.centerAddress{
    width: 40vw;
    height: auto;
    text-align: left;
}

html,
body {
   margin:0 auto;
   padding: 0;
   max-width: 960px;
   height: 100%;
   background-color: white;
   text-align: center;
}

HTML

<div class="centerAddress">
     <p style="margin-top: 5%">test</p>
     <p>testt</p>
     <p>test</p>
     <p>test</p>
     <p>test</p>
</div>

Answer 1

制作

.centerAddress p {
  text-align: left;
}

对其中的p代码有效，否则可能会继承body的中心

Answer 2

请删除身体对齐。在css中使用两个类

html,
body {
   margin:0 auto;
   padding: 0;
   max-width: 960px;
   height: 100%;
   background-color: white;
   border: 1px solid #ddd;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}

Html中的

可以在任何地方使用这些类。像这样，

<body>
    <h1 class="text-center">Body Header</h1>
    <div class="centerAddress text-left">
        <p style="margin-top: 5%">test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
   </div>
</body>

Answer 3

您可以尝试使用!important来胜过css特异性

.centerAddress{
    width: 40vw;
    height: auto;
    text-align: left !important;
}

有关详细信息，请参阅here

或者，您可以使用.centreAddress选择器

定位*框内的所有子元素

.centerAddress *  {
    text-align: left;
}

Answer 4

这应该是解决方案，让我知道这是否有助于你

＆＃13;

.centerAddress {
  width: 40vw;
  height: auto;
  text-align: left !important;
  display: inline-block;
}

html,
body {
  padding: 0;
  max-width: 960px;
  height: 100%;
  background-color: white;
}

body.center {
  text-align: center;
}

＆＃13;

<body class="center">
  <div class="centerAddress">
    <p style="margin-top: 5%">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

＆＃13;

忽略正文的文本对齐方式

4 个答案: