CSS。中心内联块。不要将内容集中在一起

Question

＆＃13;

＆＃13;

.wrap{
  width:800px;
  background: beige;
  padding:20px
}

.contactForm__headerWrap{
  border:1px solid darkkhaki;
  width:100%;
  padding:5px;
  text-align:center;
}

.contactForm__headerContainer{
  display:inline-block;
  border:1px solid red;
  padding:5px;
  margin:0 auto;
}

.contactForm__headerContainer_header{
  text-align:left;
  text-transform:uppercase;
}

.contactForm__headerContainer_header-big{
  border:1px solid darkorchid;
  font-size:20px
}

.contactForm__headerContainer_header-small{
  border:1px solid darkorange;
  font-size:14px;
  text-aling: left;
}

＆＃13;

<div class="wrap">
  <div class="contactForm__headerWrap">
    <div class="contactForm__headerContainer">
        <div class="contactForm__headerContainer_header contactForm__headerContainer_header-big">big header</div>
        <div class="ccontactForm__headerContainer_header contactForm__headerContainer_header-small">small header</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何在不使用text-align的情况下居中内联块div？

好的，我添加了代码段并显示问题。我的小标题现在位于左侧，我想将它连接到内联块的左侧。我不想要设置contactForm__headerContainer的静态宽度。 那可能吗？

Answer 1

＆＃13;

＆＃13;

.contactForm__headerWrap {
  text-align: center;
}
.contactForm__headerContainer {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  width: 250px;
}

＆＃13;

<div class="contactForm__headerWrap">
  <div class="contactForm__headerContainer">
    <span class="contactForm__headerContainer_header contactForm__headerContainer_header-big">ЗАГОЛОВОК НОМЕР ОДИН</span>
    <span class="ccontactForm__headerContainer_header contactForm__headerContainer_header-small">ПОДЗАГОЛОВОК</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这将起作用

Answer 2

另一种方法（也适用于块元素）：

.center-horizontal {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 }

说明：left：50％将元素从包含父元素的中心开始定位，因此您希望使用transform将其拉回一半宽度：translateX（-50％）

注1：务必将包含父级的位置设置为position：relative;如果父级是绝对定位的，则在其中放置100％的宽度和高度，0填充和边距div并给它位置：relative

注2：也可以使用

修改垂直居中

顶部：50％; transform：translateY（-50％）;

Answer 3

你可以尝试使用下面的内部div

  margin: 0 auto;