Question

我有一个页面，需要divs居中，另一个背景divs在最左边100％宽度我把一个内部div放在大的内部但现在我想垂直对齐两边的文本：我有4个图像要设置在一条线上，如果我把它们全部浮动，我将剩下白色空间，反之亦然这是我的代码：

<div class="programsAndEvents">
        <div class="centerDiv">
            <div class="program">
                <span class="day">JUL 16</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 17</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 18</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 19</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>
        </div>
    </div>

CSS：

.programsAndEvents {
    background-color: #F7E4D3;
    width: 100%;
    height:250px;
}

.program {
    width: 20%;
    display: inline-block;
    margin: auto auto;
    border-right:1px solid;
}

.btnDetails {
    background-color:  #FBC563;
    font-weight: bold;
    font-size: 15px;
    border:none;
    border-radius: 3px;
    width: 120px;
    height: 35px;
    margin:10 50;
}

.day {
    margin-left:35%;
    font-size: 20px;
    font-weight:bolder;
    font-family: courier;
}

hr {
    width:10%;
    height: 3px;
    border-radius:3px ;
    background-color: gray;
}

.prog {
    color: gray;
    font-size: 15px;
    margin :10 30;
}

如果有人可以请求另一种方法将文本集中在div中，我将非常感激。谢谢

Answer 1

您曾经.prog类margin : 10 30;无效已使用至px或em或%

尝试此css

          .prog {
              margin :10 30; // remove this line 
            }
            .program{
              text-align:center; // add this line
            }

            .day {
                margin-left:35%;  //remove this line
            }
        .program {
            border-right:1px solid; // remove this line
        }
        .program + .program {
            border-left:1px solid; // add line line and this css
        }
    .btnDetails{
      margin:10 50; // remove this line
    }
.centerDiv{
  margin: 0 auto; // add this line 
  text-align: center;  // add this line 
  font-size: 0;  // add this line 
}
.program{
  font-size:12px; // add this line 
}

=======================

<强>演示

＆＃13;

.programsAndEvents {
    background-color: #F7E4D3;
    width: 100%;
    height:250px;
}

.program {
    width: 20%;
    display: inline-block;
    margin: auto auto;
    
    text-align:center;
}
.program + .program {
border-left:1px solid;
}

.btnDetails {
    background-color:  #FBC563;
    font-weight: bold;
    font-size: 15px;
    border:none;
    border-radius: 3px;
    width: 120px;
    height: 35px;
    
}

.day {

    font-size: 20px;
    font-weight:bolder;
    font-family: courier;
}
.centerDiv{
  margin: 0 auto;  
  text-align: center;    
  font-size: 0;  
}
.program{
  font-size:12px;  
}
hr {
    width:10%;
    height: 3px;
    border-radius:3px ;
    background-color: gray;
}

.prog {
    color: gray;
    font-size: 15px;
    
}

＆＃13;

<div class="programsAndEvents">
        <div class="centerDiv">
            <div class="program">
                <span class="day">JUL 16</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 17</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 18</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 19</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>
        </div>
    </div>

＆＃13;

Answer 2

增加.program div的宽度并设置程序div border的最后一个子项

＆＃13;

.program {
    width: 24.5%;
    display: inline-block;
    margin: auto auto;
    border-right:1px solid;
}
.program:last-child {
   border:none;
}

＆＃13;

面临浮动左右属性的问题

2 个答案: