I've been trying to work on a new section for my website, but I've been having a lot of trouble when trying to keep things aligned in the way I want them too
I've edited a screencap really quick to show what I'm trying to accomplish
And without text, the images line up just fine, but the moment I add text is when everything falls apart
Here's how it looks
How can I get the results I want?
Here's my CSS code
.downloadscontainer {
text-align: center;
}
.downloadbutton {
display: inline-block;
float: left;
}
.downloadbutton2 {
display: inline-block;
float: center;
}
.downloadbutton3 {
display: inline-block;
float: center;
}
And here's the HTML code for the section I'm having trouble with
<div class="downloadscontainer">
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" class="downloadbutton"></a>
<p>This is supposed to be an example</p>
<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" class="downloadbutton2"></a>
<p>This is also an example</p>
<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" class="downloadbutton3"></a>
<p>Another example LOL</p>
</div>
Make the .downloadscontainer a flex element (flex is awesome).
Then wrap each set of image+text in a div.
CSS:
.downloadscontainer {
display: flex;
text-align: center;
}
div.wrapper {
flex: 1;
}
HTML:
<div class="downloadscontainer">
<div class="wrapper">
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" class="downloadbutton"></a>
<p>This is supposed to be an example</p>
</div>
<div class="wrapper">
<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" class="downloadbutton2"></a>
<p>This is also an example</p>
</div>
<div class="wrapper">
<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" class="downloadbutton3"></a>
<p>Another example LOL</p>
</div>
</div>
You must use margin
.downloadscontainer {
margin: 0 auto;
}
Try this.
HTML:
<div class="downloadscontainer">
<div>
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" class="downloadbutton">
</a>
<p>This is supposed to be an example</p>
</div>
<div>
<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" class="downloadbutton2">
</a>
<p>This is also an example</p>
</div>
<div>
<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" class="downloadbutton3">
</a>
<p>Another example LOL</p>
</div>
</div>
CSS:
.downloadscontainer {
text-align: center;
display: inline-flex;
}
.downloadscontainer > div {
margin: auto;
}
Not being able to see your pictures from your code, makes it hard to help you out as I wanted.
But here's a little help:
CSS:
.downloadscontainer {
text-align: center;
display:flex;
}
.downloadbutton {
display: block;
float: left;
}
.downloadbutton2 {
display: block;
float: center;
}
.downloadbutton3 {
display: block;
float: center;
}
HTML
<div class="downloadscontainer">
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" class="downloadbutton"></a>
<p>This is supposed to be an example</p>
<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" class="downloadbutton2"></a>
<p>This is also an example</p>
<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" class="downloadbutton3"></a>
<p>Another example LOL</p>
</div>
This should keep the images horizontally and the text below the images.
But keep an eye on this website, if you want to wrap the text in an image and align the text different, I think float:none; or text-align:center; is what you want to achieve:
https://hostpapasupport.com/align-float-images-website/
W3schools has many tutorials and awesome gimmicks to help you out with this matter,
so many code-snippets that could help you out with that too.
https://www.w3schools.com/howto/default.asp
I hope I could help you with the sites and the code.
Related
I am trying to move an image underneath the text. I tried (position: absolute) and moving the image with -px but I want the image to stay in the same place on the HTML but have it moved using only CSS. I am doing a mobile-first approach and because of the desktop design, the IMG has to stay at the same position in HTML. I also tried to moving the text but it just goes over the image or the padding and just doesn't work. It might be easier to explain by screenshots:
The results I want to achieve:
And my current results are:
And my current code is:
img {
display: block;
width: 50%;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
Try this out
<style>
#intromessage{
display: flex;
flex-direction: column-reverse;
}
</style>
A few options are avalaible.
transform:scale(x) can be used
#intromessage,
#intromessage>* {
transform: scale(1, -1); /* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin:auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
for older browser, display:table could be involved :
#intromessage {
display: table;
width: 100%
}
#intromessage>div {
display: table-header-group;/* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin: auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
flex is already answered but order can be used too :
#intromessage {
display: flex;
flex-wrap:wrap;/* to be different from other answer */
}
#intromessage>div {
width: 100%;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
and the latest : grid can use order too
#intromessage {
display: grid;
grid-template-rows: auto;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
I would use flexbox for a responsive layout.
#intromessage {
display: flex;
flex-direction: column-reverse;
}
Here is a good resource: CSS Tricks - Guide to Flexbox
Trying to vertically center align text next to an image in a three across grid alignment. Have tried many things but either one of two things happens:
- text vertically center aligns for one row of text, but wraps under the image if there is more than one row of text
- text wraps properly for multiple rows of text, but won't vertically center align, as shown in the provided code
Any suggestions?
.tile-third {
font-size: 18px;
text-transform: uppercase;
float: left;
width: 25%;
margin-right: 1%;
margin-bottom: 1%;
}
.tile-image {
vertical-align:middle;
float:left;
margin-right: 1%;
background-color:#000;
}
.tile-text {
}
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-outside.png"/>
<div class="tile-text">Department Description One (DD1)</div>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-lowimpact.png"/>
<span class="tile-text">Department Description Two</span>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-fun.png"/>
<span class="tile-text">Department Description Three (DD3)</span>
</a>
</div>
the image and the text is inside in an anchor tag,
change the style of the anchor tag to achieve the required.
example,
.tile-third a {
height: 100%;
display: flex;
align-items: center;
}
Is this what you are looking for??
.tile-third {
display: inline-block;
font-size: 18px;
text-transform: uppercase;
width: 30%;
}
.tile-third > a {
align-items: center;
display: flex;
}
.tile-image {
background-color:#000;
margin-right: 2%;
}
.tile-text {
}
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-outside.png"/>
<div class="tile-text">Department Description One (DD1)</div>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-lowimpact.png"/>
<span class="tile-text">Department Description Two</span>
</a>
</div>
<div class="tile-third">
<a href="#">
<img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-fun.png"/>
<span class="tile-text">Department Description Three (DD3)</span>
</a>
</div>
I set the display value for the <a> tag under the <div class="tile-third"> to flex which is an easy way to get things to properly align.
This allows the <img> and <div> inside the <a> to properly align.
I have 3 icons that i want to align them in the center i tried different code but nothing is working so far, i tried putting a margin right to it, but the problem with that is that it's adding an unnecessary space between them, so i want them to be close to each other, is there a way to put margin-right to it and remove the space from there ?
i just want to align them below my paragraph but in the center of it.
heres my code so far.
#body a img {
width: 50px;
height: 50px;
margin-top: 50px;
margin-right: 200px;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Will it be a simple text-align missing ?
#body a img {
width: 50px;
height: 50px;
}
.icons {
text-align:center;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Here you are DEMO
#body a img {
width: 50px;
height: 50px;
}
.icons {
text-align: center;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Here's a demo https://jsfiddle.net/r4wwczao/
In HTML I added a container for each icon to give them a percent size (the border is just to see the solution better):
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias </p>
<div class="icons">
<div class="icon_div">
<img class="icon1" src="images/youtube.png">
</div>
<div class="icon_div">
<img class="icon2" src="images/twitch.png">
</div>
<div class="icon_div">
<img class="icon3" src="images/art.png">
</div>
</div>
</div>
And CSS:
img{
width: 50px;
height: 50px;
}
.icon_div{
border:1px black solid;
display: inline-block;
text-align: center;
width:32%;
}
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.
This is the CSS:
<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
margin:auto, auto;
}
</style>
This is the HTML:
<div class="main_block">
<img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"> <img class="social" src="http://lorempixel.com/400/200/" alt="Google +"> </a>
</div>
Help is much appreciated.
FIDDLE
You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}
I'm not sure if you wanted them to stack over each other, or just to center them.
Stack them over each other
JSFiddle
To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.
Just center them
JSFiddle
This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.
You have to set a width on the main-block class and remove the comma.
Your style should look something like this:
.main_block
{
width: 40em;
margin:0 auto;
}