将两张图片放在一张上方[重复]答案

【问题标题】：place two images one above the other [duplicate]将两张图片放在一张上方[重复]
【发布时间】：2021-03-28 01:24:19
【问题描述】：

我正在寻找更新网站。目标是将“reservez”按钮放在图像“logis”上方。我的问题是，无论我做什么更改，我都有另一种样式接管并且我的更改不会生效。所以我有点绝望，我不知道如何移动图像上方的“reservez”元素。

您能帮帮我吗，我才刚刚开始，对您来说似乎很明显的事情对我来说可能并不明显。提前致谢。我拥有的： Actual Images

代码：

<div class="site-branding">
  <div class="logo-main" style="text-align: left">
    <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
    <a href="https://hotel-restaurant-borie.fr/" rel="home" class="site-logo"
      ><img
        id="desktop-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        alt="Hotel LOGIS LA BORIE en Périgord noir"
        width="988"
        height="614"
      />
      <img
        id="retina-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        alt="Hotel LOGIS LA BORIE en Périgord noir"
        width="988"
        height="614"
      />
    </a>
    <div class="tel-header">Tel. +33 (0 53 28 97 60</div>
  </div>
  <div class="form-reservation">
    <div class="logo-logis">
      <a
        href="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"
          alt="lien de réservation"
          style="width: 400px !important"
        />
      </a>
    </div>
    <div class="group-input">
      <div class="logo-logis">
        <a
          href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/reservez-1.png"
            alt="lien de réservation"
            width="112"
            height="25"
        /></a>
        <a
          href="https://www.logishotels.com/fr/hotel/hotel-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB"
          target="_blank"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"
        /></a>
      </div>
    </div>
  </div>
</div>

我想要的是： Final result I want

【问题讨论】：

请显示您当前的 CSS 代码
请不要重复封闭的问题。如果提供的副本没有回答您的问题，那么 edit 原始问题并解释为什么没有。
我很抱歉我这样做是因为旧问题措辞不好，我的英语很糟糕......我不能再从那里删除它，我试过了

标签： html css wordpress bootstrap-4 styles

【解决方案1】：

在你的样式中尝试下面的 CSS

.logo-logis {
    display: flex;
    flex-direction: column;
}

【讨论】：

【解决方案2】：

试试这个，但我不确定它是否工作正常，所以试试吧。

          .images {
          display: inline-flex;
          flex-direction: column;
          }

【讨论】：

很抱歉没有成功，但非常感谢您提供帮助，谢谢。