Question

我设计了下面的div，我不知道如何在bootstrap中创建它。我希望div为10列宽，图像为svg图像，宽64像素，高48像素。中间的文字是来自Google Fonts的字体Roboto，大小为20px。我希望图像和文字也是垂直居中的。Image

我的尝试：`

dig www.omnipagos.com any

; <<>> DiG 9.8.3-P1 <<>> www.omnipagos.com any
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 13274
;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 4

;; QUESTION SECTION:
;www.omnipagos.com.     IN  ANY

;; ANSWER SECTION:
www.omnipagos.com.  44  IN  A   50.63.202.32
www.omnipagos.com.  60  IN  NS  www.omnipagos-alpha.herokuapp.com.
www.omnipagos.com.  60  IN  NS  ns25.domaincontrol.com.
www.omnipagos.com.  60  IN  NS  ns26.domaincontrol.com.
www.omnipagos.com.  60  IN  SOA ns25.domaincontrol.com. dns.jomax.net. 2017083101 28800 7200 604800 600

;; ADDITIONAL SECTION:
ns25.domaincontrol.com. 72193   IN  A   216.69.185.13
ns25.domaincontrol.com. 10595   IN  AAAA    2607:f208:206::d
ns26.domaincontrol.com. 76947   IN  A   208.109.255.13
ns26.domaincontrol.com. 10595   IN  AAAA    2607:f208:302::d

Answer 1

更好的方法可能是使用bootstraps flexbox display class d-flex。我已将您的代码放入codeply project。有关flexbox的更多信息以及如何在位于here的引导文档中使用它。

HTML with Bootstrap 4：

<div class="container">
   <div class="row d-flex justify-content-between align-items-center">
       <img src="http://via.placeholder.com/64x48" alt="breath">
       span class="align-middle">You have taken 5000000 breaths</span>
       <img src="http://via.placeholder.com/64x48" alt="breath">
   </div>
</div>

CSS：

.container {
    position: absolute;
    top: 50%;
    left: 15%;
}

如何在bootstrap中创建这个div

1 个答案: