Question

所以我尝试使用我的代码，并在许多论坛上查看是否已经给出了答案。我还没找到任何东西。我想知道如何将按钮div彼此对齐，如下所示：

目前，我的代码是：

＆＃13;

.directeur {
  width: 50%;
  float: left;
}

.directeur p {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.directeur a>img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

＆＃13;

<div class="directeur">
  <img src="http://via.placeholder.com/500x150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
  <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
</div>
<div class="directeur">
  <img src="http://via.placeholder.com/500x150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
  <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
</div>

＆＃13;

有人能帮助我吗？我创建了其他Div，尝试了Vertical-Align和Inline-Block。我希望绿色按钮矩形在我的代码中像这样对齐。目前，由于文本框的高度，它们没有对齐。

Answer 1

设置

Lorem ipsum部分的最小高度，使它们相同：

＆＃13;

//*****************************************************************************
#include "stm32f446xx.h"
#include "stm32f4xx_hal.h"
//! \file main.c
//! \brief main application
//! \version 1.0.0.0
//! \date $Creat_time$
//! \author $Creat_author$
//! \copy
//!
//! Copyright (c) 2014 CooCox.  All rights reserved.
//
//! \addtogroup project
//! @{
//! \addtogroup main
//! @{
//*****************************************************************************

int main(void)

__HAL_RCC_GPIOA_CLK_ENABLE();
     GPIO_InitTypeDef GPIO_InitTypeDefStruct;

     GPIO_InitTypeDefStruct.Pin = GPIO_PIN_1;
     GPIO_InitTypeDefStruct.Speed = GPIO_SPEED_LOW;
     GPIO_InitTypeDefStruct.Pull = GPIO_PULLUP;
     GPIO_InitTypeDefStruct.Mode = GPIO_MODE_OUTPUT_PP;

    HAL_GPIO_Init(GPIOA, &GPIO_InitTypeDefStruct);


    while(1)

    {
        HAL_GPIO_TogglePin(&GPIO_InitTypeDefStruct,GPIO_PIN_1);


    }

＆＃13;

        .directeur{
        width: 50%;
        float: left;
    }
    .directeur p {
        width: 80%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        margin-top: 10px;
        min-height: 225px;
    }
    .directeur a>img{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        display: block;
    }

＆＃13;

或者您可以使用一些javascript来衡量最高的一个，然后在页面加载时使另一个相同的高度，例如Equalise。

Answer 2

这是Flexbox的工作！

将您的代码包裹在Flexbox容器中，这将确保您的所有.directeurs具有相同的高度
对.directeur使用flexbox，flex-direction: column垂直排列子元素。
在最后一个元素（margin-top: auto）上设置.directeur a，以确保它始终是其父元素的最底层。

.directeurs {
  display: flex;
}
.directeur{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.directeur p {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}
.directeur a {
  margin-top: auto;
}
.directeur a > img{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

<div class="directeurs">
  <div class="directeur">
    <img src="http://via.placeholder.com/500x150" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
    <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
  </div>
  <div class="directeur">
    <img src="http://via.placeholder.com/500x150" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
    <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
  </div>
</div>

Answer 3

你试过这个吗？

.custom_element{
position: absolute;
left:0;
right:0;
text-align: center;
}

将custom_element替换为您需要的元素。

Answer 4

您可以使用display:table-cell和position。我冒昧地在两个.directeur周围添加了一个包装器。看它适合你。

＆＃13;

.directeur-wrapper{
display:table;
}
.directeur{
display:table-cell;
width:50%;
padding:20px 20px 80px;
position:relative;
}
.directeur img{max-width:100%;}
.directeur a{position:absolute; bottom:0;}

＆＃13;

<div class="directeur-wrapper">
<div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>
        <div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>
        </div>

＆＃13;

对齐两个不同DIV中的两个按钮

4 个答案: