V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
nurupo
V2EX  ›  CSS

初学 CSS,问一个比较基础的问题

  •  
  •   nurupo · 2020-10-06 15:33:18 +08:00 · 2627 次点击
    这是一个创建于 1269 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不使用 position:absolute,如何把元素放在两个 div 中间? 比如说把图中乔氏家的 h3 标签放在上下两个 div 中间。

    Snipaste_2020-10-06_15-14-56.png

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .product {
                width: 560px;
                height: 880px;
                border: 3px solid #eeeeee;
                margin: 20px;
            }
    
            .product-header {
                width: 560px;
                height: 560px;
                background-color: #f8f8f8;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            
            .product-img {
                width: 455px;
                height: 455px;
            }
    
            .product-content {
                position: relative;
                margin: 40px;
            }
    
            .product-brand {
                position: absolute;
                border: 1px solid #cda3b1;
                background-color: #cda3b1;
                color: #ffffff;
                top: -70px;
                padding: 10px;
                font-size: 26px;
                font-weight: 400;
            }
    
            .product-title {
                font-weight: 400;
                display: -webkit-box;
                word-break: break-word;
                -webkit-line-clamp: 2;
                overflow: hidden;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                font-size: 40px;
            }
    
            .product-discount {
                float: left;
                list-style: none;
                border: 1px solid #c82b50;
                margin: 20px 10px 0px 0px;
                font-size: 26px;
                color: #c82b50;
                padding: 2px;
            }
    
            .product-price {
                clear: both;
                float: left;
                list-style: none;
                line-height: 70px;
                margin: 10px 0px;
            }
    
            .product-price-text {
                font-size: 40px;
                font-weight: 700;
                color: #f10604;
            }
    
            .product-similar {
                float: right;
                list-style: none;
                width: 160px;
                height: 70px;
                border: 1px solid #ffe6ea;
                background-color: #ffe6ea;
                border-radius: 999em;
                text-align: center;
                line-height: 70px;
                margin: 10px 0px;
            }
    
            .product-similar-text {
                font-size: 30px;
                font-weight: 700;
                color: #cd2852;
            }
        </style>
    </head>
    <body>
        <div class="product">
            <div class="product-header">
                <img class="product-img" src="http://img.alicdn.com/imgextra/i2/3161207834/O1CN01Lwd1Q427k1MvtNOA3_!!3161207834.jpg">
            </div>
            <div class="product-content">
                <h3 class="product-brand">乔氏家</h3>
                <h1 class="product-title">风衣外套女 2020 新款中长款流行英伦风过膝春秋韩版宽松气质大衣</h1>
                <ul>
                    <li class="product-discount">
                        <p class="product-discount-info">每 300 减 30</p>
                    </li>
                    <li class="product-discount">
                        <p class="product-discount-info">满 128 减 10</p>
                    </li>
                </ul>
                <ul>
                    <li class="product-price">
                        <span class="product-price-text">¥&nbsp;168</span>
                    </li>
                    <li class="product-similar">
                        <span class="product-similar-text">看相似</span>
                    </li>
                </ul>
            </div>
            
        </div>
    </body>
    </html>
    
    9 条回复    2020-10-16 06:58:41 +08:00
    seki
        1
    seki  
       2020-10-06 15:34:40 +08:00
    为什么不用?
    nurupo
        2
    nurupo  
    OP
       2020-10-06 15:43:37 +08:00
    @seki 想问问有没有什么其他的方法?
    jjplay
        3
    jjplay  
       2020-10-06 15:57:52 +08:00
    用负 margin,我弄了个演示,方便查看 背景色改成了 pink

    jsrun.net/KN6Kp
    zhangkunduanfei
        4
    zhangkunduanfei  
       2020-10-06 16:05:31 +08:00
    单纯放中间的话 中间那个 div display:flex,然后 justify-content 和 align-items 给 center 就可以
    nurupo
        5
    nurupo  
    OP
       2020-10-06 16:33:09 +08:00
    @jjplay 感谢大佬解答
    nurupo
        6
    nurupo  
    OP
       2020-10-06 16:33:40 +08:00
    @zhangkunduanfei 不是要居中的效果,不过还是谢谢了
    zachlhb
        7
    zachlhb  
       2020-10-06 16:45:12 +08:00 via Android
    margin 设置水平居中,line-height 设置垂直居中
    MiracleKagari
        8
    MiracleKagari  
       2020-10-06 17:30:39 +08:00 via Android
    brand float,title margin top,
    chnwillliu
        9
    chnwillliu  
       2020-10-16 06:58:41 +08:00 via Android
    负 margin 正解
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5296 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 07:26 · PVG 15:26 · LAX 00:26 · JFK 03:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.