如何在DIV中垂直和水平对齐SPAN

SearchForKnowledge

我有以下HTML代码:

<div id="slideClick">
    <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;">
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

CSS:

.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}
#slideClick {
    float:left;
    height:90px;
    width:40px;
    background:#EE8D40;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    text-align: center;
}

显示此:

在此处输入图片说明

如何SPAN在蓝色内水平和垂直居中DIV

不久

我创建了一个JSFiddle,这可能是您想要的

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

我创建了一个JSFiddle,这可能是您想要的

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>


.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}

#slideClick {
    float:left;
    height:190px;
    width:200px;
    background:#EE8D40;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在FlowPanel中垂直对齐和水平对齐组件?

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何在UITextView中水平和垂直对齐文本?

来自分类Dev

在div中垂直和水平对齐图像

来自分类Dev

如何在嵌套的div中实际居中(垂直和水平)文本

来自分类Dev

如何在DIV中垂直和水平居中放置文本

来自分类Dev

如何在div中对齐span元素

来自分类Dev

如何在CSS中垂直和水平对齐?

来自分类Dev

垂直和水平对齐容器中的多个div子级

来自分类Dev

如何在<span>中垂直居中对齐文本?

来自分类Dev

如何在div中垂直对齐2个类

来自分类Dev

如何在div中水平居中对齐ul

来自分类Dev

Bootstrap 4:在div中垂直和水平对齐文本(具有给定的div高度)

来自分类Dev

如何在Bootstrap CSS的行和列中垂直和水平对齐子级?

来自分类Dev

如何在这些框中水平对齐这些div?

来自分类Dev

如何在水平列表中垂直对齐元素

来自分类Dev

如何使用Bootstrap在列中垂直和水平对齐标题

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何在UITextView中水平和垂直对齐文本?

来自分类Dev

如何在CSS的div中垂直对齐元素?

来自分类Dev

如何在div中垂直一一对齐文本?

来自分类Dev

如何在DIV中垂直和水平对齐SPAN

来自分类Dev

在div中水平对齐儿童的垂直方向

来自分类Dev

如何使div垂直和水平对齐居中?

来自分类Dev

如何在div中居中和垂直对齐文本?

来自分类Dev

如何在可变高度div上混合垂直和水平对齐?

来自分类Dev

如何垂直对齐div中的链接和按钮?

来自分类Dev

CSS:如何在 div 中垂直和水平居中图像

来自分类Dev

如何在引导程序中制作垂直和水平对齐的响应式图像

Related 相关文章

  1. 1

    如何在FlowPanel中垂直对齐和水平对齐组件?

  2. 2

    如何在包含图像的div中垂直对齐链接?

  3. 3

    如何在UITextView中水平和垂直对齐文本?

  4. 4

    在div中垂直和水平对齐图像

  5. 5

    如何在嵌套的div中实际居中(垂直和水平)文本

  6. 6

    如何在DIV中垂直和水平居中放置文本

  7. 7

    如何在div中对齐span元素

  8. 8

    如何在CSS中垂直和水平对齐?

  9. 9

    垂直和水平对齐容器中的多个div子级

  10. 10

    如何在<span>中垂直居中对齐文本?

  11. 11

    如何在div中垂直对齐2个类

  12. 12

    如何在div中水平居中对齐ul

  13. 13

    Bootstrap 4:在div中垂直和水平对齐文本(具有给定的div高度)

  14. 14

    如何在Bootstrap CSS的行和列中垂直和水平对齐子级?

  15. 15

    如何在这些框中水平对齐这些div?

  16. 16

    如何在水平列表中垂直对齐元素

  17. 17

    如何使用Bootstrap在列中垂直和水平对齐标题

  18. 18

    如何在包含图像的div中垂直对齐链接?

  19. 19

    如何在UITextView中水平和垂直对齐文本?

  20. 20

    如何在CSS的div中垂直对齐元素?

  21. 21

    如何在div中垂直一一对齐文本?

  22. 22

    如何在DIV中垂直和水平对齐SPAN

  23. 23

    在div中水平对齐儿童的垂直方向

  24. 24

    如何使div垂直和水平对齐居中?

  25. 25

    如何在div中居中和垂直对齐文本?

  26. 26

    如何在可变高度div上混合垂直和水平对齐?

  27. 27

    如何垂直对齐div中的链接和按钮?

  28. 28

    CSS:如何在 div 中垂直和水平居中图像

  29. 29

    如何在引导程序中制作垂直和水平对齐的响应式图像

热门标签

归档