2017-06-20 38 views
0

這裏是我的HTML:爲什麼我的內聯塊div不對齊?

.classWrap { 
 
    text-align: center; 
 
} 
 

 
.classInd { 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 20px; 
 
    border: 2px solid #FFF202; 
 
    border-radius: 10%; 
 
    box-shadow: 0 0 15px 0 #FFF202; 
 
    background-image: url(img/logos/logoSmall10.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.classTitle { 
 
    text-align: center; 
 
    font-family: bebaslight; 
 
    margin-bottom: 0px 
 
} 
 

 
.classInd p { 
 
    font-family: bebaslight; 
 
    font-size: 13px; 
 
    margin: 5px; 
 
} 
 

 
.line { 
 
    border-top: .25px solid black; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}
<div class="classWrap"> 
 
    <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Body Sculpting</h3> 
 
    <div class="line"></div> 
 
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Blitz</h3> 
 
    <div class="line"></div> 
 
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Intro Training</h3> 
 
    <div class="line"></div> 
 
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Circuit Training</h3> 
 
    <div class="line"></div> 
 
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">H.I.I.T. Abs</h3> 
 
    <div class="line"></div> 
 
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Cardio</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Strength</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Boot Camp</h3> 
 
    <div class="line"></div> 
 
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Endurance</h3> 
 
    <div class="line"></div> 
 
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> 
 
    </div> 
 
</div>

我嘗試添加垂直對齊:頂部的類「classWrap」,因爲這已經定了類似的問題,是其他職位的建議,但那沒用。有些被推高,有些被推倒。

回答

2

您需要將vertical-align:top添加到您的.classInd規則中。

.classWrap { 
 
    text-align: center; 
 
} 
 

 
.classInd { 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 20px; 
 
    border: 2px solid #FFF202; 
 
    border-radius: 10%; 
 
    box-shadow: 0 0 15px 0 #FFF202; 
 
    background-image: url(img/logos/logoSmall10.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    vertical-align:top; 
 
} 
 

 
.classTitle { 
 
    text-align: center; 
 
    font-family: bebaslight; 
 
    margin-bottom: 0px 
 
} 
 

 
.classInd p { 
 
    font-family: bebaslight; 
 
    font-size: 13px; 
 
    margin: 5px; 
 
} 
 

 
.line { 
 
    border-top: .25px solid black; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}
<div class="classWrap"> 
 
    <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Body Sculpting</h3> 
 
    <div class="line"></div> 
 
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Blitz</h3> 
 
    <div class="line"></div> 
 
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Intro Training</h3> 
 
    <div class="line"></div> 
 
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Circuit Training</h3> 
 
    <div class="line"></div> 
 
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">H.I.I.T. Abs</h3> 
 
    <div class="line"></div> 
 
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Cardio</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Strength</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Boot Camp</h3> 
 
    <div class="line"></div> 
 
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Endurance</h3> 
 
    <div class="line"></div> 
 
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> 
 
    </div> 
 
</div>

+0

不它有一個默認? – cst1992

+0

@ cst1992默認情況下沒有?內聯元素的默認垂直對齊方式爲基線 – j08691

+0

對不起,'vertical-align:top'當然。不要'div'有默認的那個? – cst1992

0

vertical-align: top;聲明的問題是,您將其應用於容器,而不是子元素。它應該設置在.classInd選擇器上。

.classWrap { 
 
    text-align: center; 
 
} 
 

 
.classInd { 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 20px; 
 
    border: 2px solid #FFF202; 
 
    border-radius: 10%; 
 
    box-shadow: 0 0 15px 0 #FFF202; 
 
    background-image: url(img/logos/logoSmall10.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    vertical-align: top; 
 
} 
 

 
.classTitle { 
 
    text-align: center; 
 
    font-family: bebaslight; 
 
    margin-bottom: 0px 
 
} 
 

 
.classInd p { 
 
    font-family: bebaslight; 
 
    font-size: 13px; 
 
    margin: 5px; 
 
} 
 

 
.line { 
 
    border-top: .25px solid black; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}
<div class="classWrap"> 
 
    <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Body Sculpting</h3> 
 
    <div class="line"></div> 
 
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Blitz</h3> 
 
    <div class="line"></div> 
 
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Intro Training</h3> 
 
    <div class="line"></div> 
 
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Circuit Training</h3> 
 
    <div class="line"></div> 
 
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">H.I.I.T. Abs</h3> 
 
    <div class="line"></div> 
 
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Cardio</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Strength</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Boot Camp</h3> 
 
    <div class="line"></div> 
 
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Endurance</h3> 
 
    <div class="line"></div> 
 
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> 
 
    </div> 
 
</div>

0

我會建議,而不是限定的高度和類屬性寬度「classInd」,定義這些屬性類「classWrap」;對於班級'classInd',您可以將高度和寬度設置爲100%。希望這會幫助你。

0

您可以嘗試添加這些:

.classInd:nth-of-type(even) { 
float: right; 
} 

.classInd:nth-of-type(odd) { 
float: left; 
} 

.classWrap { 
 
    text-align: center; 
 
} 
 

 
.classInd { 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 20px; 
 
    border: 2px solid #FFF202; 
 
    border-radius: 10%; 
 
    box-shadow: 0 0 15px 0 #FFF202; 
 
    background-image: url(img/logos/logoSmall10.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.classInd:nth-of-type(even) { 
 
float: right; 
 
} 
 

 
.classInd:nth-of-type(odd) { 
 
float: left; 
 
} 
 

 
.classTitle { 
 
    text-align: center; 
 
    font-family: bebaslight; 
 
    margin-bottom: 0px 
 
} 
 

 
.classInd p { 
 
    font-family: bebaslight; 
 
    font-size: 13px; 
 
    margin: 5px; 
 
} 
 

 
.line { 
 
    border-top: .25px solid black; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}
<div class="classWrap"> 
 
    <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Body Sculpting</h3> 
 
    <div class="line"></div> 
 
    <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Blitz</h3> 
 
    <div class="line"></div> 
 
    <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Intro Training</h3> 
 
    <div class="line"></div> 
 
    <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Circuit Training</h3> 
 
    <div class="line"></div> 
 
    <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">H.I.I.T. Abs</h3> 
 
    <div class="line"></div> 
 
    <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Cardio</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">MX Strength</h3> 
 
    <div class="line"></div> 
 
    <p></p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Boot Camp</h3> 
 
    <div class="line"></div> 
 
    <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> 
 
    </div> 
 
    <div class="classInd"> 
 
    <h3 class="classTitle">Cardio Endurance</h3> 
 
    <div class="line"></div> 
 
    <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> 
 
    </div> 
 
</div>