html - 菜单 Logo 位于 div 的中心但不是标题 - Bootstrap

Question

我一直在尝试为我网站的移动浏览器创建一个响应式菜单，它有四个链接。我为它们每个都指定了 25% 宽度。问题是，虽然它的 Logo 保持居中，但它们的标题却没有。您可以注意到该片段的标题不在其 div 的中心。

这里有什么问题？我究竟做错了什么？你能建议我如何让这些标题也居中吗？

这是当前状态:

我想把它变成这样:

片段:

.menu {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #434A54;
	color: white;
	font-size: 12px;
	padding-top: 7px;
}

a.main-link:link,
a.main-link:visited {
	background-color: #434A54;
	color: white;
	text-decoration: none;
	display: inline-block;
	width: 25%;
}

.logo {
	width: 24px;
	height: 24px;
	margin-left: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container menu">
   <div class="row">
      <a href="start.html" class="main-link">
         <div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
            LINK1 
         </div>
      </a>
      <a href="calculator-home.html" class="main-link">
         <div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
            LINK222 
         </div>
      </a>
      <a href="contact.html" class="main-link">
         <div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
            LINK33333 
         </div>
      </a>
      <a href="about.html" class="main-link">
         <div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
            LINK4444444 
         </div>
      </a>
   </div>
</div>

Answer 1

列应该是行的直接子元素。

将text center 类添加到列中。将 anchor 标记放在列内并使其成为 display:block。图片和菜单标题应放在 anchor 标记内。

/*This css is not required. */
img{
  width:25px;
  height:25px;
}

a.main-link:link,
a.main-link:visited {
	text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-3 text-center">
    <a href="start.html" class="main-link d-block">
      <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
      <div> LINK1 </div>
    </a>
  </div>
  <div class="col-3 text-center">
    <a href="start.html" class="main-link d-block">
      <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
      <div> LINK1 </div>
    </a>
  </div>
  <div class="col-3 text-center">
    <a href="start.html" class="main-link d-block">
      <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
      <div> LINK1 </div>
    </a>
  </div>
</div>
</div>