1. casa
  2. Domanda e risposta
  3. text-align: center non funziona

text-align: center non funziona

2015-05-06 15 views
6

Sto usando jQuery Mobile e ho il seguente html e css:text-align: center non funziona

.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; funziona bene in Mozilla, ma non in altri browser. Se uso text-align: center; allora non funziona con nessun browser. this is how I am getting now this is how i want

fonte

2015-05-06 Gopi Nath

+0

Si prega di fornire il codice che riproduce il problema. Il codice che hai fornito (usando 'text-align: center;') funziona bene quindi è probabile che ci siano altri stili che causano il problema. https://jsfiddle.net/n42bna5o/. Vale anche la pena notare che gli elementi 'div' non sono validi negli elementi' a'. –

+0

si prega di trovare il codice completo snippet.I ho modificato il codice –

+1

Grazie, ma questo non è ancora abbastanza, utilizzando 'text-align: center;' centra il contenuto nel tuo esempio. Probabilmente stai perdendo del vitale CSS che sta causando il problema. –

risposta

3

Utilizzare solo text-align:center; Essa opererà in tutti i browser .. Inoltre è possibile utilizzare margin: 0 auto; per allineare nel centro Demo

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

RevisionatoDemo:

Dopo aver visto l'output previsto, ho trovato questo come una delle soluzioni ..

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

Spero che questo vi aiuterà !!

fonte

2015-05-06 09:08:26

+0

Si prega di trovare il compelete css e il codice html sopra –

+0

potete mostrarci come una rappresentazione di immagine con l'output previsto e l'output reso? Mi sembra giusto per me .. ecco perché ho chiesto la rappresentazione dell'immagine –

+0

Ho aggiunto l'immagine in alto.Si prega di controllare –

2

Non v'è alcuna necessità di utilizzare -moz prefisso. Tutti i browser lo supportano. È necessario fornire width all'elemento per text-align per funzionare.

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

Documenti: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

fonte

2015-05-06 09:06:27 Tushar

+1

Dove nello standard si dice che la proprietà 'text-align' richiede' width'? – urbz

+0

@urbz Non l'hanno detto esplicitamente, ma se guardi i loro esempi vedrai che hanno usato 'width' in ogni esempio. – Tushar

+0

Sì, ma ciò non significa che un elemento con l'attributo css 'text-align' fornito ** richiede **' width', anche se aiuta a risolvere il problema di TS. – urbz

0

Il primo problema che vedo è che stai usando div all'interno di un a, che non è permesso perché i div sono un elemento di blocco e i collegamenti sono in linea, quindi devi cambiare questi div a intervalli.

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

Se si desidera che il comportamento dei blocchi su quelle campate

.ui-bar span { 
    display: block; 
}

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

fonte

2015-05-06 09:10:06 braks

+0

Ho provato a sostituirlo con lo span e ho aggiunto il blocco di visualizzazione, ma il testo non è allineato al centro –

1

Come BRAKS sottolinea, avete un paio di problemi con il markup e il CSS poteva fare con un po 'di ordine, tuttavia, è possibile risolvere questo problema rimuovendo display: block; da .ui-bar, .ui-body. Questo perché stai usando una tecnica di centraggio del tavolo per centrare il testo e l'immagine, il cambiamento di .ui-bar a display: block; interrompe il funzionamento di questa tecnica.

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

fonte

2015-05-06 10:37:23

Problemi correlati

 Problemi correlati