Question

以下是codepen：http://codepen.io/anon/pen/XdQaew

老实说，我不知道该怎么做。我试图将每一层都集中在一起，如：

<a class="uultra-btn-u-menu" href="#">
                            <span>
                                <i class="fa fa-chain fa-2x"></i>
                            </span>
                            <span style="margin: 0 auto;" class="uultra-user-menu-text">Search the Bunch</span>
                        </a>

我认为这可能是因为文字在跨度内部我无法得到它？

我也试过了：

<span style="text-align: center;" class="uultra-user-menu-text">Search the Bunch</span>

完整代码：

.usersultra-dashboard-cont {
  float: none;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #fff; /*strikethrough */
  padding-top: 10px;
  text-align: center;
}

.usersultra-dashboard-cont .usersultra-dashboard-left {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  margin: 0px 2% 20px auto;
  padding: 0px 10px 0px 5px;
  border-right: solid 1px #EFEFEF;
  min-height: 300px !important;
}

.myavatar {
  text-align: center;
  clear: both !important;
  position: relative !important;
  border: none !important;
  padding: 0px !important;
  margin: 0px !important;
  width: unset !important;
}

ul.uultra_u_dashboard_main_menu {
  list-style: none;
  margin-left: 0px;
  text-align: left;
  padding: 0px;
}

.uultra_u_dashboard_main_menu a {
  text-align: left;
  font-size: 34px;
}

a.uultra-btn-u-menu {
  min-height: 30px;
  height: auto !important;
  vertical-align: top;
  background: #fff;
  border-radius: 5px;
  color: #333 !important;
  text-decoration: none;
}

.uultra-btn-u-menu span.uultra-user-menu-text {
  text-align: left;
}

<div class="usersultra-dashboard-cont">
        <div class="usersultra-dashboard-left" style="box-shadow: 0px 2px 2px rgba(0,0,0,.5) !important;display:inline-block;float:left;padding: 0px;margin-right: 1em;background:#fff;">
            <div class="myavatar">
                <ul class="uultra_u_dashboard_main_menu">
                    <li>
                        <a class="uultra-btn-u-menu" href="#">
                            <span>
                                <i class="fa fa-chain fa-2x"></i>
                            </span>
                            <span class="uultra-user-menu-text">Search the Bunch</span>
                        </a>
                    </li>
                    <li>
                        <a class="uultra-btn-u-menu" href="#">
                            <span>
                                <i class="fa fa-chain fa-2x"></i>
                            </span>
                            <span class="uultra-user-menu-text">Search the Bunch</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

您的代码中存在一些错误（例如左侧选中了text-align），您可以使用我安排的代码：

.usersultra-dashboard-cont {
  float: none;
  display: inline-block;
  position: relative;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #fff; /*strikethrough */
  padding-top: 10px;
  text-align: center;
}

.usersultra-dashboard-cont .usersultra-dashboard-left {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  margin: 0px 2% 20px auto;
  padding: 0px 10px 0px 5px;
  border-right: solid 1px #EFEFEF;
  min-height: 300px !important;
}

.myavatar {
  text-align: center;
  clear: both !important;
  position: relative !important;
  border: none !important;
  padding: 0px !important;
  margin: 0px !important;
  width: unset !important;
}

ul.uultra_u_dashboard_main_menu {
  list-style: none;
  margin-left: 0px;
  text-align: center;
  padding: 0px;
}

.uultra_u_dashboard_main_menu a {
  text-align: center;
  font-size: 34px;
}

a.uultra-btn-u-menu {
  min-height: 30px;
  height: auto !important;
  vertical-align: top;
  background: #fff;
  border-radius: 5px;
  color: #333 !important;
  text-decoration: none;
}

<div class="usersultra-dashboard-cont">
        <div class="usersultra-dashboard-left" style="box-shadow: 0px 2px 2px rgba(0,0,0,.5) !important;display:inline-block;float:left;padding: 0px;margin-right: 1em;background:#fff;">
            <div class="myavatar">
                <ul class="uultra_u_dashboard_main_menu">
                    <li>
                        <a class="uultra-btn-u-menu" href="#">
                            <span>
                                <i class="fa fa-chain fa-2x"></i>
                            </span>
                            <span class="uultra-user-menu-text">Search the Bunch</span>
                        </a>
                    </li>
                    <li>
                        <a class="uultra-btn-u-menu" href="#">
                            <span>
                                <i class="fa fa-chain fa-2x"></i>
                            </span>
                            <span class="uultra-user-menu-text">Search the Bunch</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Answer 2

在这种情况下，请使用浏览器的开发工具进行检查。我选择了您的范围并阅读计算规则并找到了：

text-align > left
.uultra_u_dashboard_main_menu a > left inline:40
ul.uultra_u_dashboard_main_menu > left inline:33

我去了那里并删除了有罪的线路（36＆amp; 41）和TADA！

将包含在span中的下一行的文本居中

2 个答案: