Is there a way to align these elements in the same line. Right now it is one below the other
<h5>Title</h5><a id="downloadData" class="shiny-download-link" href="" target="_blank" download><h5>Download</h5></a>
Try with float property
https://www.w3schools.com/cssref/pr_class_float.asp
<div>
<h5 style="float: left;">Title</h5>
<a style="float: left;" id="downloadData" class="shiny-download-link" href="" target="_blank" download><h5>Download</h5></a>
</div>
Only use floats if your site is stuck in the year 2000, nowadays you use flexbox for that:
.wrap {
display: flex;
gap: 20px;
}
<div class="wrap">
<h5>Title</h5>
<a id="downloadData" class="shiny-download-link" href="" target="_blank" download>
<h5>Download</h5>
</a>
</div>
Related
I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.
Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}
You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>
I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>
I have 2 Images as a link In my HTML page and I want to insert text under each image in the <a> tag to be clickable, So I tried this code :
<div align="center" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300"/>
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300"/>
<p> another text </p></a>
</div>
But I get a style issue like this Image and I want them to be in the center like this Image
Try adding this CSS to your container:
#img_container {
display: flex;
flex-direction: row;
}
I highly recommend you to read this guide about Flexbox. It will
help you to understand Flexbox and it will avoid several headaches
while centering DOM elements.
Here is a working snippet.
#img_container {
display: flex;
flex-direction: row;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300" id="shortcode_icon" />
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300" id="workorder_icon" />
<p> another text </p></a>
</div>
EDIT: You can also add it as inline style.
<div align="center" id="img_container" style="margin-top: 150px; display: flex; flex-direction: row;">
You can also use flexbox on the anchors to center the content within.
#img_container {
margin-top:150px;
}
#img_container a {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="#link">
<img src="https://picsum.photos/300/300" id="shortcode_icon" />
<p> Some text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text that is a litte longer. </p>
</a>
</div>
I have an outer div which is a flex box. Inside it, there will be three elements as inline-block: two advertisements on the left and right, and the content in between. I want the advertisements to be aligned to the left and right and then work on my content in the middle as if the ads were the margins of the page (I hope this is clear). I'm having to use a lot of spaces but is there a way to directly place the two ads on either sides of the flex box? I tried using position:right and float:right; properties but these didn't work.
Here's my code:
<!---==OUTER DIV==-->
<div id="content-flex" style="display:flex;">
<!--====LEFT SIDE AD====-->
<div style="display:inline-block; position:left;">
<span style="color:white;">Advertisement</span><br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a><br/>
</div>
<!--HERE I HAVE TO USE A LOT OF -->
<!--====MIDDLE : CONTEN====T-->
<div style="display:inline-block;">
<p>Loreum Ipsum...</p>
</div>
<!--HERE I HAVE TO USE A LOT OF -->
<!--====RIGHT SIDE AD====-->
<div style="display:inline-block; position:right;">
<span style="color:white;">Advertisement</span><br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
This is how the page looks right now:
If you just set flex: 1 on middle div it will take all the free space and push right ad to right side. Also once you set display: flex on parent element float property won't work on child elements.
#content-flex > div:nth-child(2) {
flex: 1;
}
<div id="content-flex" style="display:flex;">
<div>
<span style="color:white;">Advertisement</span>
<br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
<br/>
</div>
<div>
<p>Loreum Ipsum...</p>
</div>
<div >
<span style="color:white;">Advertisement</span>
<br/>
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
Add the following style to your outer div.
justify-content: space-between;
or
justify-content: space-around;
Look here for more alignment options for flex.
This is how it can be managed using the flex box model:
#content-flex,
#AdLft,
#AdRgt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.Middle{
width:100%;
}
<div id="content-flex">
<div id="AdLft">
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
<div class="Middle">
<p>Loreum Ipsum...</p>
</div>
<div id="AdRgt">
<a href="http://www.bmw.com.au" target="_blank">
<img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
</a>
</div>
</div>
I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
I'm new to front-end development and am trying to get facebook share and twitter tweet buttons in the same line just below an image but am unable to do it.
<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a>
<div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">
Share</a>
</div>
</div>
No matter what I do I can't get them under the image, aligned on the right side. This is what I'm getting:
enter image description here
There are many many ways to do it
One way is display: inline-block and vertical-align: middle
Another modern way is use display flex for the parent element and align-self: center for the child elements
just resize your browser to see the result
<figure><img src=" " alt=""></figure>
<div class="row">
<a class="twitter-share-button"
href="https://twitter.com/share"
data-url=" ">Tweet</a>
<div class="fb-share-button" data-href=""
data-layout="button"
data-mobile-iframe="true">
THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">
Share</a>
</div>
</div>
.row {
display: flex;
}
.fb-share-button, .twitter-share-button {
align-self: center;
}
https://jsfiddle.net/mpna771s/3/ for the flex way;
You could also float the elements
<div class="row">
<div class="smedia">
<div class="twitter">
<a class="twitter-share-button" href="https://twitter.com/share" data-url=" ">Tweet</a>
</div>
<div class="fb">
<div class="fb-share-button" data-href="" data-layout="button" data-mobile-iframe="true">
THERE IS A LOT OF TEXT HERE
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flink%2F&src=sdkpreparse">Share</a>
</div>
</div>
</div>
</div>
CSS
<style type="text/css">
.smedia{width:100px;margion:0 auto}
.twitter, .fb{float:left;margin:10px;}
</style>