【问题标题】:Align text on background image without positioning在背景图像上对齐文本而不定位
【发布时间】:2017-03-01 23:20:15
【问题描述】:

我想将我的文本准确地定位在我的背景图像的中心,而不使用和定位相对或绝对。大多数在线答案都使用绝对位置作为文本和顶部。但我不想使用任何定位

【问题讨论】:

标签: html css css-position


【解决方案1】:

你试过了吗:

margin: 0 auto;
text-align: center;
vertical-align: middle;

【讨论】:

  • It 属性的应用有限。仅适用于“inline-level 和 'table-cell' 元素”
  • 还有另一种方法,使用 jquery 将您的文本边距设置为等于 (parrentHeight - yourTextHeight)/2。我知道的就这些
  • 这只是一个简单的居中元素。使用其他技术是可能的,但是是多余的。
  • 我找到了一个替代问题,希望对stackoverflow.com/questions/8865458/…有帮助
  • 我已经说过 line-height 是最可靠的解决方案之一。
【解决方案2】:

您还可以使用内联边距(顶部、底部、右侧或左侧)来定位您想要的图像位置。您只需将您的边距设置为 px(es margin:10px),然后您可以在浏览器上在线尝试(通常只需按 F12,屏幕上就会显示所有信息)

【讨论】:

    【解决方案3】:

    你可以使用 flex

    .container {
        display: flex;
        width: 350px;
        height: 350px;
        background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
    }
    
    .item {
        background-color: white;
        width: 80px;
        height: 80px;
        margin: auto;
    }
    <div class="container">
      <div class="item">Sample Text</div>
    </div>

    【讨论】:

    • 使用不灵活。 IE 仅从 11 版本开始部分支持它。
    • 可以带前缀支持。看到这个链接:w3schools.com/css/css3_flexbox.asp
    • 没有必要仅仅因为想要简单的解决方案就乱扔代码。
    • 但事实是,答案是正确的。你不能投票。而且你什么也没指定
    • 当然没错。我们正在讨论该方法的可行性。
    【解决方案4】:

    使用 Flexbox 很容易解决问题

    .test{
      background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
      height:200px;
      display: flex;
      align-items: center;
      justify-content: center;
      }
    &lt;div class="test"&gt;Hello World&lt;/div&gt;

    【讨论】:

    • 它的 css,每个浏览器的行为都不同.. 如果你想要完全支持使用 JavaScript,或者你可以检查这个stackoverflow.com/questions/17447807/…@ArtemSolovev 标记其他人的答案 -1 对你没有帮助。特别是当它解决问题时......并且没有指定用户特定的浏览器要求
    • @ArtemSolovev 世界在向前发展,有些编译器会自动生成浏览器支持,所以.. 代码不会被污染,您只需编写原始的 flex 版本...
    猜你喜欢
    • 2012-03-02
    • 2020-08-08
    • 2015-02-20
    • 1970-01-01
    • 2018-04-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多