【问题标题】:text-align :center not working文本对齐:中心不起作用
【发布时间】:2015-07-16 07:44:18
【问题描述】:

我正在使用 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;,那么它在任何浏览器中都不起作用。

【问题讨论】:

  • 请提供重现问题的代码。您提供的代码(使用text-align: center;)工作正常,因此很可能有其他样式导致问题。 jsfiddle.net/n42bna5o。另外值得注意的是div元素在a元素中无效。
  • 请找到完整的代码sn-p。我已经编辑了代码
  • 谢谢,但这还不够,使用text-align: center; 将您的示例中的内容居中。您可能遗漏了一些导致问题的重要 CSS。
  • 我正在使用 jquery mobile 和我在我的 main.css 中给出的 css 代码,这部分正在使用。剩下的都是从 jquery mobile 呈现的
  • 谢谢,我现在可以重现该问题。我已经发布了一个答案,希望能解决这个问题并解释出了什么问题。

标签: jquery html css jquery-mobile


【解决方案1】:

不需要使用-moz 前缀。所有浏览器都支持它。 您必须向元素提供 width 才能使 text-align 工作。

演示:https://jsfiddle.net/86ghx94c/

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

【讨论】:

  • 标准中哪里说text-align 属性需要width?
  • @urbz 他们并没有明确表示,但是如果您查看他们的示例,您会发现他们在每个示例中都使用了width。
  • 是的,但这并不意味着具有css属性text-align的元素提供需要 width,即使它有助于解决TS问题。
【解决方案2】:

仅使用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;
 }

希望对你有帮助!!

【讨论】:

  • 请在上面找到完整的css和html代码
  • 您能否向我们展示具有预期输出和渲染输出的图像表示?对我来说看起来不错..这就是为什么要求图像表示
  • 我已经添加了上面的图片。请检查
【解决方案3】:

我看到的第一个问题是您在 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;
}

小提琴:https://jsfiddle.net/9tw1f4sL/1/

【讨论】:

  • 我尝试用 span 替换它并添加了显示块,但文本仍然没有对齐中心
【解决方案4】:

正如 braks 所指出的,您的标记确实存在一些问题,您的 CSS 可以稍微整理一下,但是,您可以通过从 .ui-bar, .ui-body 中删除 display: block; 来解决此问题。这是因为您正在使用表格居中技术来居中文本和图像,将 .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;
}
<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>

【讨论】:

    猜你喜欢
    • 2014-03-22
    • 1970-01-01
    • 1970-01-01
    • 2019-07-10
    • 1970-01-01
    • 2017-07-28
    相关资源
    最近更新 更多