Question posted in 
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.
I really don’t want to complicate things using JavaScript, but if that is not possible, please do add those in.
2
Answers
Yes there is a way to center align but you have to additionally add a block level element.
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:-
Let me know if it works for you or not.