John Curry John Curry - 6 months ago 13
HTML Question

Centering text that wraps to next line in span

Here's the codepen: http://codepen.io/anon/pen/XdQaew

I honestly have no idea what to do. I've tried to center each layer with something like:

<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>


I thought it might be because the text is inside of a span that I can't get it?

I've also tried:

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


I know there's probably an answer here in S.O but I can't find it, so I do apologize

Answer

There were some mistakes in your code (for example text-align is selected on the left), you can use this code arranged by me:

.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>

Comments