Centering text that wraps to next line in span

Question

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>

Full Code:

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

Possible duplicate of [Difference between and
with text-align:center;?](http://stackoverflow.com/questions/7756926/difference-between-span-and-div-with-text-aligncenter) — BSMP, May 13 '16 at 20:34
It can be complicated to find which rule is applied, use your browser dev tools, it would have given you the answer. Firefox > tools > Web developer > Selector. If you don't use Firefox, you have something similar anyway. Also avoid to copy paste code in big chunks, copy line by line and check you understand the effect. If you don't, don't paste and you'll find the utility later or it was useless. — Adrien Horgnies, May 13 '16 at 20:38
Sorry. working for a client, and I'm not sure the best way to ask for help without importing the entire project. I got it figured out.. I guess when working for someone my brain just stops functioning. — John Curry, May 13 '16 at 20:40
I'd like to delete this question, since it's pretty much useless. Still learning how to manage my own stress levels when working for a client. but I can't find any 'delete' question button — John Curry, May 13 '16 at 20:43

score 1 · Accepted Answer · answered May 13 '16 at 20:24

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>

score 0 · Answer 2 · answered May 13 '16 at 20:33

When you are in this case, check with the dev tools of your browser. I selected your span and read computed rules and found this :

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

I went in there and removed the incriminated lines (36 & 41) and TADA !

Centering text that wraps to next line in span

2 Answers2