如何在Bootstrap中实现图片置于居中文字按钮上方？

Since you're using Bootstrap, we can easily integrate the image into your existing centered structure while keeping everything aligned properly. Here's how to modify your code:

Modified Code #

<!-- First, ensure the viewport has full height for vertical centering -->
<style>
html, body {
  height: 100%;
  margin: 0;
}
</style>

<div class="h-100 row align-items-center"> 
  <div class="col text-center"> 
    <div class="container"> 
      <!-- Added centered image here -->
      <img src="your-image-path.jpg" alt="Image related to medical applications" class="mb-4" style="max-width: 200px; height: auto;">
      <h1> Applying to medicine? We can help.</h1> 
      <button type="button" onclick="location.href='about.html'" class="btn btn-outline-success btn-lg">More information</button> 
    </div> 
  </div> 
</div>

Key Changes Explained: #

• Full Viewport Height: The CSS for html, body ensures your h-100 row has a full-height parent to center content vertically. Without this, the vertical centering might not work as expected.
• Centered Image: By placing the <img> inside the text-center column, it automatically inherits horizontal centering. The mb-4 class adds vertical space between the image and heading (adjust to mb-2, mb-3, etc., for more/less spacing).
• Responsive Image: max-width: 200px; height: auto; keeps the image scaled properly and prevents it from overflowing the container. You can adjust the max-width value to fit your design, or use Bootstrap classes like w-50 to set it to 50% of the container width.

Alternative: If You Want the Image to Be a Separate Centered Block Above #

If you actually want the image to sit in the blank space above your existing centered text (not part of the same vertical center group), you can add a separate centered row above your current one:

<!-- Separate centered image row -->
<div class="row justify-content-center py-5">
  <img src="your-image-path.jpg" alt="Image related to medical applications" style="max-width: 200px; height: auto;">
</div>

<!-- Your original centered text/button block -->
<div class="h-100 row align-items-center"> 
  <div class="col text-center"> 
    <div class="container"> 
      <h1> Applying to medicine? We can help.</h1> 
      <button type="button" onclick="location.href='about.html'" class="btn btn-outline-success btn-lg">More information</button> 
    </div> 
  </div> 
</div>

This will place the image horizontally centered at the top (with padding py-5 for spacing), and keep your text/button vertically centered below it.

内容的提问来源于stack exchange，提问作者qcc101