Html Question posted in
Some basic documentation can be found here.

Html – How to align an image at a center of a div when the image is auto resized to fit within div

Currently, I have issues with trying to center the image horizontally and

body {
  margin: 0;
  padding: 0
}

.top-navigation-bar {
  background-color: #5B9BD5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 100px;
  padding: 10px 10px;
  margin: 0;
}

.top-navigation-bar-image {
  border-width: 0;
  width: auto;
  height: inherit;
  display: inline;
}

.top-navigation-bar-button {
  margin: 0% 1%;
  padding: 0px 2.55% 5px 2.5%;
  font-family: Arial;
  background-color: inherit;
  width: 10%;
  height: inherit;
  border-style: none;
  text-align: center;
  display: inline;
  text-decoration: none;
  color: black;
}

.top-navigation-bar-button:hover {
  border-width: thick;
  border-color: black;
  border-style: none none solid none;
}

.main-content {
  margin: 2.5% 10%;
  padding: 0;
  width: 80%;
}

.home-title {
  font-family: Arial;
  font-size: 40px;
  text-align: center;
}

.home-card-section {
  margin: 2.5% 0.5% 2.5% 0.5%;
  width: auto;
}

.home-card {
  background-color: #5B9BD5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 400px;
  font-size: 20px;
  padding: 10px 10px;
  display: inline-block;
  margin: 10px 0px;
  text-decoration: none;
  color: black;
}

.home-card-image {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.home-card-text {
  width: 100%;
  height: 40%;
  padding: 0;
  margin: 2.5% 0;
  background-color: white;
  text-align: center;
}

.section-title {
  font-family: Arial;
  font-size: 30px;
  text-align: center;
  border-width: thick;
  border-color: black;
  margin: 10% 35% 2.5% 35%;
  width: 30%;
  border-style: none none solid none;
}

.section-content {
  font-family: Arial;
  font-size: 20px;
  text-align: center;
}

.vertical-card {
  width: 400px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: inline-block;
  text-decoration: none;
  border-color: #5B9BD5;
  border-width: 15px;
  border-style: solid;
  background-color: white;
}

.vertical-card-community-icon-image {
  display: block;
  max-width: 90%;
  max-height: 80%;
  width: auto;
  height: auto;
  margin: auto;
}
<div class="top-navigation-bar" id="top-navigation-bar">
  <img src="images/datapredict/icon.png" class="top-navigation-bar-image"></img>
  <a href="home.html" class="top-navigation-bar-button">Home</a>
  <a href="https://aqwamcreates.github.io/DataPredict" class="top-navigation-bar-button">API</a>
  <a href="" class="top-navigation-bar-button">Cross-Server Training</a>
  <a href="home.html" class="top-navigation-bar-button">Why DataPredict?</a>
  <a href="" class="top-navigation-bar-button">Contacts</a>
</div>
<div class="main-content">
  <div class="home-title">Deploying machine and deep learning models never have been easier with<br>DataPredict
    <div>
      <div class="home-card-section">
        <a class="home-card" href="images/home-card/home-card-1.png">
          <img class="home-card-image" src="images/home-card/home-card-1.png"></img>
          <p class="home-card-text"><br><br>User-friendly API with complete documentation</p>
        </a>
        <a class="home-card" href="images/home-card/home-card-2.png">
          <img class="home-card-image" src="images/home-card/home-card-2.png"></img>
          <p class="home-card-text"><br><br>Easily load and save model parameters</p>
        </a>
        <a class="home-card" href="images/home-card/home-card-3.png">
          <img class="home-card-image" src="images/home-card/home-card-3.png"></img>
          <p class="home-card-text"><br><br>Run and modify at run-time and compile-time</p>
        </a>
        <a class="home-card" href="images/home-card/home-card-4.png">

          <img class="home-card-image" src="images/home-card/home-card-4.png"></img>
          <p class="home-card-text"><br><br>Over 35 models and many extensions</p>
        </a>
      </div>
      <div class="section-title">Join the community!</div>
      <div>
        <a class="vertical-card" href="https://devforum.roblox.com/t/datapredict-machine-and-deep-learning-library-learning-ais-and-more/2196446">
          <img class="vertical-card-community-icon-image" src="images/community-icons/roblox-devforum-light.png"></img>
        </a>
        <a class="vertical-card" href="https://www.reddit.com/r/DataPredict">
          <img class="vertical-card-community-icon-image" src="images/community-icons/reddit.png"></img>
        </a>
        <a class="vertical-card" href="https://www.linkedin.com/groups/14347008/">
          <img class="vertical-card-community-icon-image" src="images/community-icons/linkedin.png"></img>
        </a>
      </div>
    </div>

vertically inside the blue-bordered boxes. Right now, the image is auto-resized and could not use the conventional margin: auto tutorials that give good results. I tried to use padding instead of margin, but I still can’t get the result.

Here is the codes.

This is what the website currently looks like with those codes.

enter image description here

I really don’t want to complicate things using JavaScript, but if that is not possible, please do add those in.

Tags:

2

Answers


  1. 0

    Yes there is a way to center align but you have to additionally add a block level element.

        <a class="verticalcard" href="https://www.linkedin.com/groups/14347008/">
    <div class="image__center">
    <img class="vertical-card-community-icon-image" src="Your image" />
    </div>
    </a>

        .image__center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    }
    Login or Signup to reply.
  2. 0

    You just need to add flex instead of inline-block in class vertical-card and then you can use alignment property. Please check below updated code:-

    body {
  margin: 0;
  padding: 0
}

.top-navigation-bar {
  background-color: #5B9BD5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 100px;
  padding: 10px 10px;
  margin: 0;
}

.top-navigation-bar-image {
  border-width: 0;
  width: auto;
  height: inherit;
  display: inline;
}

.top-navigation-bar-button {
  margin: 0% 1%;
  padding: 0px 2.55% 5px 2.5%;
  font-family: Arial;
  background-color: inherit;
  width: 10%;
  height: inherit;
  border-style: none;
  text-align: center;
  display: inline;
  text-decoration: none;
  color: black;
}

.top-navigation-bar-button:hover {
  border-width: thick;
  border-color: black;
  border-style: none none solid none;
}

.main-content {
  margin: 2.5% 10%;
  padding: 0;
  width: 90%;
}

.home-title {
  font-family: Arial;
  font-size: 40px;
  text-align: center;
}

.home-card-section {
  margin: 2.5% 0.5% 2.5% 0.5%;
  width: auto;
}

.home-card {
  background-color: #5B9BD5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 400px;
  font-size: 20px;
  padding: 10px 10px;
  display: inline-block;
  margin: 10px 0px;
  text-decoration: none;
  color: black;
}

.home-card-image {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  max-height: 100% ;
}

.home-card-text {
  width: 100%;
  height: 40%;
  padding: 0;
  margin: 2.5% 0;
  background-color: white;
  text-align: center;
}

.section-title {
  font-family: Arial;
  font-size: 30px;
  text-align: center;
  border-width: thick;
  border-color: black;
  margin: 10% 35% 2.5% 35%;
  width: 30%;
  border-style: none none solid none;
}

.section-content {
  font-family: Arial;
  font-size: 20px;
  text-align: center;
}

.vertical-card {
    width: 400px;
    height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-decoration: none;
    border-color: #5B9BD5;
    border-width: 15px;
    border-style: solid;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-card-community-icon-image {
  display: block;
  max-width: 90%;
  max-height: 80%;
  width: auto;
  height: auto;
  margin: auto;
}
.all-vertical-card-wrp {
    display: flex;
    gap: 10px;
}
    <div class="top-navigation-bar" id="top-navigation-bar">
  <img src="images/datapredict/icon.png" class="top-navigation-bar-image"></img>
  <a href="home.html" class="top-navigation-bar-button">Home</a>
  <a href="https://aqwamcreates.github.io/DataPredict" class="top-navigation-bar-button">API</a>
  <a href="" class="top-navigation-bar-button">Cross-Server Training</a>
  <a href="home.html" class="top-navigation-bar-button">Why DataPredict?</a>
  <a href="" class="top-navigation-bar-button">Contacts</a>
</div>
<div class="main-content">
  <div class="home-title">Deploying machine and deep learning models never have been easier with<br>DataPredict
    <div>
      <div class="home-card-section">
        <a class="home-card" href="https://picsum.photos/200/300?random=1">
          <img class="home-card-image" src="https://picsum.photos/200/300?random=1"></img>
          <p class="home-card-text"><br><br>User-friendly API with complete documentation</p>
        </a>
        <a class="home-card" href="https://picsum.photos/200/300?random=1">
          <img class="home-card-image" src="https://picsum.photos/200/300?random=1"></img>
          <p class="home-card-text"><br><br>Easily load and save model parameters</p>
        </a>
        <a class="home-card" href="https://picsum.photos/200/300?random=1">
          <img class="home-card-image" src="https://picsum.photos/200/300?random=1"></img>
          <p class="home-card-text"><br><br>Run and modify at run-time and compile-time</p>
        </a>
        <a class="home-card" href="https://picsum.photos/200/300?random=1">

          <img class="home-card-image" src="https://picsum.photos/200/300?random=1"></img>
          <p class="home-card-text"><br><br>Over 35 models and many extensions</p>
        </a>
      </div>
      <div class="section-title">Join the community!</div>
      <div class="all-vertical-card-wrp">
        <a class="vertical-card" href="https://devforum.roblox.com/t/datapredict-machine-and-deep-learning-library-learning-ais-and-more/2196446">
          <img class="vertical-card-community-icon-image" src="https://picsum.photos/200/300?random=1"></img>
        </a>
        <a class="vertical-card" href="https://www.reddit.com/r/DataPredict">
          <img class="vertical-card-community-icon-image" src="https://picsum.photos/200/300?random=1"></img>
        </a>
        <a class="vertical-card" href="https://www.linkedin.com/groups/14347008/">
          <img class="vertical-card-community-icon-image" src="https://picsum.photos/200/300?random=1"></img>
        </a>
      </div>
    </div>

    Let me know if it works for you or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search