text-align: center Mobil jquery kullanarak ve aşağıdaki html ve css var am

Question

çalışmıyor:

.ui-grid-a { 
 
padding: 0; 
 
margin: 0; 
 
margin-top: 15px; 
 
height: 380px; 
 
} 
 
.ui-block-a, .ui-block-b { 
 
padding: 0; 
 
margin: 0; 
 
height: 33.3%; 
 
} 
 
.ui-block-a a, .ui-block-b a { 
 
width: 50%; 
 
} 
 
.ui-bar-a, ui-bar { 
 
margin: 0 auto; 
 
padding: 0; 
 
height: 90%; 
 
width: 90%; 
 
max-width: 500px; 
 
text-align: center; 
 
/* Gradient set-up */ 
 
background: #3DC8F3 !important; 
 
/* Border set-up */ 
 
border: 0px solid white; 
 
border-radius: 0px; 
 
box-shadow: 0px 0px 0px #000; 
 
display: table; 
 
} 
 
.menu-elem { 
 
margin: 0; 
 
display: table-cell; 
 
vertical-align: middle; 
 
text-align: center !important; 
 
} 
 
.menu-elem a { 
 
text-decoration: none; 
 
} 
 
.menu-elem .menu-text { 
 
margin-top: 5px; 
 
font-size: 0.9em; 
 
color: #FFF; 
 
text-align:center; 
 
} 
 

 
.ui-bar, .ui-body { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: block; 
 
    padding: 0.9em 1em !important; 
 
    clear: both; 
 
    text-align: center !important; 
 
} 
 
    This is the full css that is being rendered for this block

<div data-role="page" id="AppBody" style="background: #00AEEF"> 
 
<div data-role="header"style="background:#0E74BC;color:white;"> 
 
<h1 class="Home">Home</h1> 
 
<a href="#" data-role="button"data-direction="reverse" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" data-transition="slide" 
 
     data-iconpos="notext" class="ui-btn-right"><img src="images/logout.png" style="width: 25px;"></a> 
 
</div> 
 
<div role="main" class="ui-content"> 
 
<div class="ui-grid-a"> <!-- menu-container --> 
 
<div class="ui-block-a"> 
 
    <div class="ui-bar ui-bar-a"> 
 
    <div class="menu-elem"> 
 
     <a href="#"> 
 
     <div class="menu-img"> 
 
      <img src="images/t.png" style="width: 50px;"> 
 
     </div> 
 
     <div class="menu-text">test</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

text-align: -moz-center; Mozilla ince ancak diğer tarayıcılarda çalışır. text-align: center; kullanırsam herhangi bir tarayıcıda çalışmaz.

Answer 1

Tüm tarayıcılarda çalışır Sadece text-align:center; .. Buna ek olarak merkezi Demo

.ui-bar, .ui-body { 
    position: relative; 
    overflow: hidden; 
    display: block; 
    padding: 0.9em 1em !important; 
    clear: both; 
    text-align: center; 
    margin:0 auto; 
} 

içinde hizalamak için margin: 0 auto; kullanabilirsiniz RevizeDemo: Bu size yardımcı olacaktır

tahmini çıkış gördükten sonra solüsyon biri olarak buldum ..

.ui-grid-a { 
    padding: 0; 
    margin: 0; 
    margin-top: 15px; 
    height: 380px; 
} 
.ui-block-a, .ui-block-b { 
    padding: 0; 
    margin: 0 auto; 
    height: 33.3%; 
} 
.ui-block-a *, .ui-block-b * { 
    margin: 0 auto; 
    text-align: center; 
} 
.ui-block-a a, .ui-block-b a { 
    width: 50%; 
} 
.ui-bar-a, ui-bar { 
    margin: 0 auto; 
    padding: 0; 
    height: 90%; 
    width: 90%; 
    max-width: 500px; 
    text-align: center; 
    /* Gradient set-up */ 
    background: #3DC8F3 !important; 
    /* Border set-up */ 
    border: 0px solid white; 
    border-radius: 0px; 
    box-shadow: 0px 0px 0px #000; 
    display: table; 
} 
.menu-elem { 
    margin: 0 auto;  
    text-align: center !important; 
} 
.menu-elem a { 
    text-decoration: none; 
     margin: 0 auto;  
    text-align: center !important; 
} 
.menu-elem .menu-text { 
    margin-top: 5px; 
    font-size: 0.9em; 
    color: #FFF; 
    text-align:center; 
} 
.ui-bar, .ui-body { 
    position: relative; 
    overflow: hidden; 
    display: block; 
    padding: 0.9em 1em !important; 
    clear: both; 
    text-align: center !important; 
} 

Umut !!

Answer 2

-moz öneki kullanmaya gerek yoktur. Tüm tarayıcılar bunu destekliyor. Çalıştırmak için text-align öğeye width değerini vermelisiniz.

Demo: https://jsfiddle.net/86ghx94c/

Dokümanlar: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Answer 3

Gördüğüm ilk sorun, bir a içinde div kullanıyorsunuz, buna izin verilmiyor, çünkü div'ler bir blok öğesi ve satırlar satır içi, dolayısıyla bu divleri açıklıklara çevirmelisiniz.

<div class="ui-block-a" > 
    <div class="ui-bar ui-bar-a"> 
     <div class="menu-elem"> 
      <a href="#"> 
       <span class="menu-img"> 
        <img src="images/t.png" style="width: 50px;"> 
       </span> 
       <span class="menu-text"> 
        test 
       </span> 
      </a> 
     </div> 
    </div> 
</div> 

.ui-bar, .ui-body { 
    position: relative; 
    overflow: hidden; 
    display: block; 
    padding: 0.9em 1em !important; 
    clear: both; 
    text-align: center; 
} 

o birleşimlerinde blokların davranışını istiyorsanız

.ui-bar span { 
    display: block; 
} 

Fiddle: Braks olarak https://jsfiddle.net/9tw1f4sL/1/

Answer 4

, kendi biçimlendirme ve yapabileceği sizin CSS ile bazı sorunlar var işaret Bununla birlikte, düzenli bir parça ile .ui-bar, .ui-body'dan display: block;'u kaldırarak bu sorunu düzeltebilirsiniz. Bunun nedeni, metni ve görüntüyü ortalamak için bir tablo merkezleme tekniği kullanıyor olmanızdır. .ui-bar'un display: block;'a değiştirilmesi bu teknik çalışmayı durdurur.

.ui-grid-a { 
 
    padding: 0; 
 
    margin: 0; 
 
    margin-top: 15px; 
 
    height: 380px; 
 
} 
 
.ui-block-a, 
 
.ui-block-b { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 33.3%; 
 
} 
 
.ui-block-a a, 
 
.ui-block-b a { 
 
    width: 50%; 
 
} 
 
.ui-bar-a, 
 
ui-bar { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    height: 90%; 
 
    width: 90%; 
 
    max-width: 500px; 
 
    text-align: center; 
 
    /* Gradient set-up */ 
 
    background: #3DC8F3 !important; 
 
    /* Border set-up */ 
 
    border: 0px solid white; 
 
    border-radius: 0px; 
 
    box-shadow: 0px 0px 0px #000; 
 
    display: table; 
 
} 
 
.menu-elem { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center !important; 
 
} 
 
.menu-elem a { 
 
    text-decoration: none; 
 
} 
 
.menu-elem .menu-text { 
 
    margin-top: 5px; 
 
    font-size: 0.9em; 
 
    color: #FFF; 
 
    text-align: center; 
 
} 
 
.ui-bar, 
 
.ui-body { 
 
    position: relative; 
 
    overflow: hidden; 
 
    /* display: block; remove this*/ 
 
    padding: 0.9em 1em !important; 
 
    clear: both; 
 
    text-align: center !important; 
 
}

<div data-role="page" id="AppBody" style="background: #00AEEF"> 
 
    <div data-role="header" style="background:#0E74BC;color:white;"> 
 
    <h1 class="Home">Home</h1> 
 
    <a href="#" data-role="button" data-direction="reverse" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" data-transition="slide" data-iconpos="notext" class="ui-btn-right"> 
 
     <img src="images/logout.png" style="width: 25px;"> 
 
    </a> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
    <div class="ui-grid-a"> 
 
     <!-- menu-container --> 
 
     <div class="ui-block-a"> 
 
     <div class="ui-bar ui-bar-a"> 
 
      <div class="menu-elem"> 
 
      <a href="#"> 
 
       <div class="menu-img"> 
 
       <img src="http://placehold.it/50x50" style="width: 50px;"> 
 
       </div> 
 
       <div class="menu-text">test</div> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>