text-align：center not working
我正在使用jquery mobile并拥有以下html和css：
.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中运行良好，但在其他浏览器中运行不正常。如果我使用text-align: center;，那么它在任何浏览器中都不起作用。
4 个答案:
答案 0 :(得分：3)
仅限使用text-align:center;它可以在所有浏览器中使用..此外，您可以使用margin: 0 auto;在中心对齐 Demo
.ui-bar, .ui-body {
position: relative;
overflow: hidden;
display: block;
padding: 0.9em 1em !important;
clear: both;
text-align: center;
margin:0 auto;
}
已修订 Demo ：
在看到您的预期输出后，我发现这是解决方案之一..
.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;
}
希望这会对你有所帮助!!
答案 1 :(得分：2)
无需使用-moz前缀。所有浏览器都支持它。
您必须为width元素提供text-align才能正常工作。
演示：https://jsfiddle.net/86ghx94c/
文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
答案 2 :(得分：1)
正如braks指出的那样，你的标记确实存在一些问题，你的CSS可以做一些整理，但是，你可以通过从public class OptimalIncome {
final static int length[] = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
final static int price[] = new int[] { 1, 5, 8, 9, 10, 17, 17, 20, 24, 30 };
public static int totalLength = 9;
static List<Integer> pickedObjects = new ArrayList<Integer>();
public static int bestCut(int i, int totalLength) {
if (i < 0) {
return 0;
} else if (length[i] > totalLength) {
return bestCut(i - 1, totalLength);
} else {
return Math.max(bestCut(i - 1, totalLength),
bestCut(i - 1, totalLength - length[i]) + price[i]);
}
}
public static void printSolution(int i,int totalLength){
if(i < 0)
return;
else if(length[i]>totalLength){
printSolution(i-1, totalLength);
}else{
int sol1 = bestCut(i-1,totalLength);
int sol2 = bestCut(i - 1, totalLength - length[i]) + price[i];
// check whether the optimal solution coming from picking the object or not .
if(sol1>sol2){
printSolution(i-1, totalLength);
}else{
pickedObjects.add(i);
printSolution(i-1, totalLength - length[i]);
}
}
}
public static void main(String[] args) {
System.out.println("Given total rod length : " + totalLength);
System.out.println("Maximum income : "
+ bestCut(price.length - 1, totalLength));
System.out.println("Smaller part sets : ");
printSolution(price.length-1, totalLength);
for (Integer i : pickedObjects) {
System.out.println("picked object: "+ i +" length : "+ length[i]+ " price "+ price[i]);
}
}
}
删除display: block;来解决这个问题。这是因为您使用表格居中技术来居中文本和图像，将.ui-bar, .ui-body更改为.ui-bar会阻止此技术的发挥。
display: block;.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;
}
答案 3 :(得分：0)
我看到的第一个问题是你在a中使用div，这是不允许的，因为div是一个块元素，链接是内联的，所以你必须将这些div更改为span。
<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;
}
如果你想要那些跨度上的块的行为
.ui-bar span {
display: block;
}
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？