在中间对齐子弹和内容

Question

我要将子弹和内容（给我们发邮件）对齐到中心（如下图所示）。我如何在CSS中做到这一点？

＆＃13;

＆＃13;

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article'] {
  margin: auto .4em auto 0;
}

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']:before {
  display: block;
  background: #000;
  border-radius: 50%;
  height: .6em;
  width: .6em;
  align-content: center;
  background: radial-gradient(circle at .33em .33em, #00f3ff, #000);
  content: ' ';
}

＆＃13;

<dt class="mt-listing-detailed-title"><a title="SUGGESTION BOX" class="internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX" rel="internal"><span class="mt-icon-article-topic-category"></span>SUGGESTION BOX</a></dt>

<dd class="mt-listing-detailed-subpages">
  <ul class="mt-listings-simple mt-listing-article-list mt-topic-hierarchy-listings mt-guide-listings mt-reveal-listing">
    <li class="mt-show-more-listing"><a title="Email Us" class="mt-listing-detailed-subpage-title internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX/Email_Us" rel="internal"><span class="mt-icon-article-topic-guide"></span>Email Us</a></li>
  </ul>
</dd>

＆＃13;

＆＃13;

＆＃13;

以下是带有代码的link to the fiddle。

  

我的CSS和编码知识有限。

Answer 1

我在CSS中做了一些改动。请看看。

.mt-show-more-listing, .mt-listing-detailed-title{
  text-align:center;
}

<div class="mt-listing-detailed-title">
  <a title="SUGGESTION BOX" class="internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX" rel="internal">SUGGESTION BOX</a>
</div>


<ul class="mt-listings-simple mt-listing-article-list mt-topic-hierarchy-listings mt-guide-listings mt-reveal-listing">
  <li class="mt-show-more-listing"><a title="Email Us" class="mt-listing-detailed-subpage-title internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX/Email_Us" rel="internal">Email Us</a>
  </li>
</ul>

Answer 2

width：//在这里允许一些; margin：auto;

Answer 3

添加一些<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="10px"> <div fxLayout.gt-md="row" fxLayout.lt-sm="column" fxLayoutGap="10px" fxFlex="100" fxFlex.gt-md="50"> <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >1</div> <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >2</div> </div> <div fxLayout.gt-md="row" fxLayout.lt-sm="column" fxLayoutGap="10px" fxFlex="100" fxFlex.gt-md="50"> <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >3</div> <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >4</div> </div> </div>

css

这是工作fiddle

Answer 4

添加了一个课堂中心，并使用该课程将您的html包装在div中。

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']{
       margin:auto .4em auto 0;

}

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']:before{
  display: block;
  background: #000;
  border-radius: 50%;
  height: .6em;
  width: .6em;
  align-content: center;
  background: radial-gradient(circle at .33em .33em, #00f3ff, #000);
  content:' ';
}
.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}
ul {
  list-style-position: inside;
  padding: 0;
  margin: 20px 0;
}

<div class="center">

<dt class="mt-listing-detailed-title"><a title="SUGGESTION BOX" class="internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX" rel="internal"><span class="mt-icon-article-topic-category"></span>SUGGESTION BOX</a></dt>

<dd class="mt-listing-detailed-subpages"><ul class="mt-listings-simple mt-listing-article-list mt-topic-hierarchy-listings mt-guide-listings mt-reveal-listing"><li class="mt-show-more-listing"><a title="Email Us" class="mt-listing-detailed-subpage-title internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX/Email_Us" rel="internal"><span class="mt-icon-article-topic-guide"></span>Email Us</a></li></ul></dd>
</div>

Answer 5

这是更新代码

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']{
       margin:auto .4em auto 0;

}

.columbia-article-topic-category .mt-listing-detailed-subpages .mt-listing-article-list .mt-show-more-listing [class*='mt-icon-article']:before{
  display: block;
  background: #000;
  border-radius: 50%;
  height: .6em;
  width: .6em;
  align-content: center;
  background: radial-gradient(circle at .33em .33em, #00f3ff, #000);
  content:' ';
}

.mt-listing-detailed-title {
  text-align: center;
}
.mt-listing-detailed-subpages {
  text-align: center;
  margin: 0;
}

ul {
  padding: 0;
  margin: 20px 0;
}

<dt class="mt-listing-detailed-title"><a title="SUGGESTION BOX" class="internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX" rel="internal"><span class="mt-icon-article-topic-category"></span>SUGGESTION BOX</a></dt>

<dd class="mt-listing-detailed-subpages"><ul class="mt-listings-simple mt-listing-article-list mt-topic-hierarchy-listings mt-guide-listings mt-reveal-listing"><li class="mt-show-more-listing"><a title="Email Us" class="mt-listing-detailed-subpage-title internal" href="https://documentationcenter.alip.accenture.com/SUGGESTION_BOX/Email_Us" rel="internal"><span class="mt-icon-article-topic-guide"></span>Email Us</a></li></ul></dd>