在按钮里面的样式象和文本并且集中它

Question

最重要的是我想要的，底部是它目前的样子

我尝试了桌子和div以及所有内容，但我似乎无法让它们将按钮上的图标和文字居中。

这是我的HTML

<table><tr>
<td style="height:66px;">
    <button class="head-button-size blue-bg" ui-sref="start">
        <div style="text-align:center">
            <md-icon class="material-icons head-material">domain</md-icon><br>
            <span class="head-mini-text">PROPERTY</span>
        </div>
    </button>
</td>
</tr></table>

我的CSS

.head-button-size {
    height: 66px;
    width: 62px;
}
.head-material {
    color:#FFFFFF; 
    font-size:50px;
}
.head-mini-text {
    color: #fff;
    font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial'; 
    font-size:12px;
}

任何可以提供帮助的CSS大师？

Answer 1

我发现你的代码没有任何问题，看起来工作正常。请查看下面的代码段。

UPDATE user_settings s 
INNER JOIN users u ON s.userid=u.id
SET commets = 0 WHERE email = "$email";

.blue-bg {
  background-color: blue;
}

.head-button-size {
  height: 66px;
  width: 100px;
  border-radius: 10px;
}

.head-material {
  color: #FFFFFF;
  font-size: 50px;
}

.head-mini-text {
  color: #fff;
  font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial';
  font-size: 12px;
}

如果这不是你想要的问题，那就分享一个小提琴手来找出问题所在！

Answer 2

请尝试这种简化的解决方案：

＆＃13;

＆＃13;

.my-button {
  width:66px;
  height:66px;
  border:2px solid #154769;
  border-radius:4px;
  background-color:#18557d;
  box-shadow: 3px 3px 3px #ccc;
}

.image {
  width:30px;
  height:30px;
  display:block;
  margin:10px auto 0px auto;
}

.text {
  color:white;
  margin: 10px auto 0px auto;
  font-size:8pt;
  text-align:center;
  font-family:Arial;
}

＆＃13;

<div class="my-button">
  <img class="image" src="http://www.iconsdb.com/icons/preview/white/home-5-xxl.png"/>
  <div class="text">
  PROPERTY
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1. 删除<td><input type="checkbox" name="aaa2" id="test" value="true" onClick="myFunction('myCheck','mycheck2', this.id)"></td> <td><input type="date" name="aaa3" id="myCheck" disabled></td> <td><input type="date" name="aaa3" id="myCheck2" disabled></td> <script> function myFunction(date1, date2, test) { if(document.getElementById(test).checked){ document.getElementById(date1).disabled = false; document.getElementById(date2).disabled = false; } else{ document.getElementById(date1).disabled = true; document.getElementById(date2).disabled = true; } } </script> ;
2. 在图片和文字之间移除（现在）无用的<div style="text-align:center">;
3. 使用flexbox将这些行添加到<br>规则，如下所示：

CSS代码

.head-button-size

这应该使您的按钮内容垂直和水平居中。然后通过添加所需的属性（例如.head-button-size { display: flex; flex-direction: column; justify-content: center; align-items: center; } ，margin或通过使用Flexbox属性来调整外观。这里提供了很好的文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

尝试使用它...它可以帮助你：

.head-material {
color:#FFFFFF; 
margin-left:-20px;
margin-top:-20px; //add this thing and adjust as you want
font-size:50px;
 }
.head-mini-text {
color: #fff;
margin-top:20px; //add this thing and adjust as you want
font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial'; 
font-size:12px;
}

尝试这样做并告诉我会发生什么？