在跨度中换行到下一行的居中文本

Question

老实说，我不知道该怎么做。我尝试将每一层居中，例如：

<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里面所以看不到？

我也试过：

<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 和 41）和 TADA！

在跨度中换行到下一行的居中文本

Centering text that wraps to next line in span

html

css

text

text-alignment