Question

我有这样的事情：

<h3 class="product-name"> Product name </h3>
<dl class="item-options"> some options </dl>

H3是中心对齐的，是否可以将项目选项与h3的左边缘对齐？所以想这样:(产品名称和选项有不同的长度）

<div style="width:100%">
_____product name long (text align center)_____
     product options
</div>

如果我将两个文本对齐，它将如下所示：

<div style="width:100%">
_____product name long (text align center)_____
              product options
</div>

Answer 1

您可以将标题和dl包装在包装器div中并将其居中设置为：

＆＃13;

dl, dt, dd {
  margin: 0
  }

.wrap {
  
text-align: center;  
  border: 1px solid #000;  
}

.container {
  display: inline-block;
}
dl {
  
text-align: left;  
}

＆＃13;

<div class="wrap">
  <div class="container">
    <h3>Header with a long string</h3>
    <dl>
      <dt>Title</dt>
      <dd>Definition</dd>
    </dl>
      
  </div>
  
  
</div>

＆＃13;

左对齐到css中的中心框

1 个答案: