【问题标题】:I can not center the div content我无法将 div 内容居中
【发布时间】:2012-03-03 21:58:54
【问题描述】:

这是我的小提琴:http://jsfiddle.net/7UwD2/

我已经尝试了我在互联网上找到的所有设置:

margin: 0px auto;width,但它不起作用。

仅当我将属性:text-align: center; 添加到 head-title 类时,它才会居中 - 但只有文本、图像仍位于左侧位置。

我的问题在哪里?

【问题讨论】:

    标签: css position centering


    【解决方案1】:
    • 从图片中删除float
    • 在外部 DIV 上使用 text-align: center
    • 使用 SPAN 代替内部 DIV,
    • vertical-align: middle 应用于图像和 SPAN

    HTML:

    <div class="head-title">
        <img class="list-icon" src="...">
        <span>Menu</span>
    </div>
    

    CSS:

    .head-title {
        width: 150px;
        height: 26px;
        padding: 5px;        
        text-align: center;
    }
    
    .head-title > * {
        vertical-align: middle;
    }
    
    .list-icon {
        width: 24px;
        height: 24px;
    }
    

    现场演示: http://jsfiddle.net/7UwD2/6/

    【讨论】:

    • 不错的技能伙伴!奇迹般有效。 :) 谢谢。
    猜你喜欢
    • 2018-10-16
    • 2014-02-06
    • 2013-10-02
    • 1970-01-01
    • 1970-01-01
    • 2023-04-05
    • 1970-01-01
    • 1970-01-01
    • 2013-12-23
    相关资源
    最近更新 更多