Question

第一行有一些文本和图标，我试图将它们包装在两列中，并排对齐。

我想有很多格式化文本的方法（例如，无序列表）。另外，我可能在代码中使用Font Awesome图标代替了img标签。

不管格式化文本，我的问题是将文本和图标放置在左/右列的中心。

如果我尝试使文本居中，则图标停留在列的左上角，或者图标和文本居中在列的左侧等。我尝试使媒体对象对齐并对齐，但也没有结果。

简短地说：我尝试过的所有解决方案都导致文本和所属图标未与列中心对齐。

我希望它看起来像这样：https://prnt.sc/mb3s2i

HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6" style="background-color:#000; ">
<div class="media d-flex align-items-center justify-content-center" style="padding-top:50px; padding-left:50px;">
<div class="media-left media-top">
<img src="images/xyz.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test1">
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li style="font-weight: bold;">Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="media" style="padding-top:50px">
<div class="media-left media-top">
<img src="images/xyz1.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
<div class="media" style="padding-top:50px;">
<div class="media-left media-middle">
<img src="images/xyz2.png" class="media-object" style="width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test">
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
<div class="media" style="padding-top:50px;">
<div class="media-left media-bottom">
<img src="images/xyz3.png" class="media-object" style=" padding-top:-10px; width:60px; color:#f636363;">
</div>
<div class="media-body">
<p>
<ul id="test" style=" padding-top:10px; width:60px; color:#f636363;">
<li>Lorem ipsum</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>

CSS：

#test1 {

 list-style:none;
 font-weight: bolder;
 font-size: 15px;
 color:#fff; 
 letter-spacing: 0;
 line-height: 0,5rem;
 padding-top: 0px;
 padding-bottom: 80px;
 }




  #test {

 list-style:none;
 font-weight: bolder;
 font-size: 15px;
 color:#636363; 
 letter-spacing: 0;
 line-height: 1rem;
 }

Answer 1

这里发生的基本上是我创建两个占据整个屏幕的网格，如果要相等的列，则将max-width放在简单一和简单二中。然后在内部居中的网格内创建flex。如果要从顶部显示，则只需创建另一个带有显示的div：flex和flex-direction到column并自对齐到top。检查我在https://jsfiddle.net/omnb12dw/2/中添加的小提琴。如果您是初学者，那么该开始学习flex和grid了。

<div class="simple-grid">
  <div class="simple-one">
    <p>
    Some Paragraph
    </p>
    <p>
    Add More and it will follow center
    </p>
  </div>

  <div class="simple-two">
    <p>
    this is just the design
    </p>
    <p>
    it should be the same
    </p>
  </div>
</div>

    div {
  padding: 0;
  margin: 0;
}
.simple-grid {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-areas: 'a a';
  border: 1px dotted black;
}

.simple-one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  height: 100vh;
  border: 1px dotted black;
}

.simple-two {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px dotted black;
}

Boostrap 4-在1行/ 2列中打包和集中某些内容的最佳方法

1 个答案: