This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 1 year ago.
I would like to have 3 buttons in the middle and a slider on the right side, these on the same line. The problem is that when I center the buttons and float the slider to the right, the buttons are not in the middle anymore. So it looks like this (ignore the top slider):
.container {
text-align: center;
}
.music-buttons {
width: 50px;
height: 50px;
}
.volume-control {
margin-right: 10px;
float: right;
}
<div>
<input type="range" class="volume-control">
</div>
<div class="container">
<img class="music-buttons" src="https://via.placeholder.com/50">
<img class="music-buttons" src="https://via.placeholder.com/50">
<img class="music-buttons" src="https://via.placeholder.com/50">
</div>
It might be a mess, but I was just trying out stuff.
Try using this CSS code :
.container{
text-align: center;
}
.music-buttons{
width: 50px;
height: 50px;
}
.volume-control{
margin-right: 10px;
position: absolute;
right: 10px;
top: 22px;
}
<div class="div-range">
<input type="range" class="volume-control">
</div>
<div class="container">
<img class="music-buttons" src="../icons/skip-start-circle.svg">
<img class="music-buttons" src="../icons/play-circle.svg">
<img class="music-buttons" src="../icons/skip-end-circle.svg">
</div>
I hope this will help.
.container{
text-align: center;
}
.music-buttons{
width: 50px;
height: 50px;
}
.volume-control{
text-align: center;
height: 50px;
}
<div class="container">
<div class="row">
<div class="col">
<img class="music-buttons" src="https://img.icons8.com/ios/50/000000/skip-to-start--v1.png">
<img class="music-buttons" src="https://img.icons8.com/ios/50/000000/pause--v1.png">
<img class="music-buttons" src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-skip-multimedia-kiranshastry-lineal-kiranshastry.png">
<input type="range" class="volume-control">
</div>
</div>
</div>
Related
so i kinda have two problems
i´m trying to make a responsive container of images that when the resolution changes the images stay side by side.
my problem is when i change the resolution to a phone when testing the images show one below the other and one
and one image's width is smaller so the image shows up a bit weird
here's what i tried
html
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<img src="brands/Adidas-Logo.png" alt="" id="brand_img_adidas">
</div>
<div class="col-sm">
<img src="brands/Nike_logo.png" alt="" id="brand_img_nike">
</div>
<div class="col-sm">
<img src="brands/the-north-face-logo-png-8.png" alt="" id="brand_img_north">
</div>
<div class="col-sm">
<img src="brands/tommy-hilfiger-logo-png-transparent.png" alt="" id="brand_img_tommy">
</div>
<div class="col-sm">
<img src="brands/zara-logo-0.png" alt="" id="brand_img_zara">
</div>
</div>
</div>
css
#brand_img_adidas
{
width: 150px;
height: 100px;
max-width: 100%;
margin-left: 10px;
}
#brand_img_nike
{
width: 200px;
height: 100px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_north
{
width: 150px;
height: 150px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_tommy
{
width: 150px;
height: 120px;
margin-left: 20px;
max-width: 100%;
margin-right: 0;
}
#brand_img_zara
{
width: 150px;
height: 150px;
margin-left: 10px;
margin-right: 0;
max-width: 100%;
}
This is not using bootstrap but this should help you get an idea about using flexbox.
So, to stack the images next to each other, we can use display: flex on the parent container.
By default, the flex-direction will be row which means that the child elements will be placed next to each other.
We can also provide flex-wrap: wrap property to make sure that if the elements overflow, it will be moved to next row.
You can read more about flexbox here
.row {
display: flex;
flex-wrap: wrap;
}
.row .col {
margin-right: 5px;
}
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_adidas">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_2">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_3">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_4">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_5">
</div>
</div>
This question already has answers here:
How to show text on image when hovering?
(10 answers)
Closed 3 months ago.
https://practice-project-html-css.vercel.app/#project
I'm talking about "PROJECTS".
When you hover there, it shows some text. How do I make it?
Like this: https://imgur.com/a/N86uRpP
HTML:
<div class="grid-container">
<div class="one"><img src="project1.png" alt="" /></div>
<div class="two"><img src="Project2.png" alt="" /></div>
<div class="three"><img src="project3.png" alt="" /></div>
<div class="four"><img src="project4.png" alt="" /></div>
<div class="five"><img src="project5.png" alt="" /></div>
<div class="six"><img src="project6.png" alt="" /></div>
<div class="seven"><img src="project7.png" alt="" /></div>
<div class="eight"><img src="project8.png" alt="" /></div>
<div class="nine"><img src="project9.png" alt="" /></div>
</div>
CSS:
.grid-container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
}
To achieve this effect, you can use a combination of the overflow and position properties. The idea is to set overflow-y: hidden; and give it a set height. Then, position the child container so that it falls outside of the parent container. When the parent container is hovered, the bottom property along with position: absolute; can be used to transition it into view.
.image-container {
position: relative;
color: white;
background-color: #888;
height: 100px;
padding: 10px;
overflow-y: hidden;
}
.image-container:hover .container-text {
bottom: 0px;
}
.container-text {
position: absolute;
bottom: -60px;
left: 0;
transition: bottom 200ms;
text-align: center;
padding: 10px;
background-color: #444;
width: 100%;
box-sizing: border-box;
}
<div class="image-container">
Hover me
<div class="container-text">Message</div>
</div>
You can check this example.
https://codepen.io/francisco-kataldo/pen/LBBryV
If you want more you can check this page.
https://ordinarycoders.com/blog/article/codepen-bootstrap-card-hovers
I have the following html block (image is just something I found on the web). I've used multiple examples and answers from different questions tackling the similar problem I have but I can't seem to figure it out.
What's the proper or best way to align a text vertically beside an image? I'm currently using bootstrap 3.3.6. I tried using different approaches but can't seem to make anything work.
.textContainer {
display: table;
}
.imageClass {
margin: 5px;
}
.spanText {
display: table-cell;
align-items: middle;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text" />
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can simply remove your display: table; CSS, and use bootstrap's default img { vertical-align: middle; } CSS to align the text vertically.
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can also use display: flex; on the parent with align-items: center; to align the flex children vertically.
.textContainer {
display: flex;
align-items: center;
}
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
I'm trying to align three background images side by side, ideally with fluidity so that they re-position when my browser window resizes.
I've tried searching for an answer to this problem and thought using CSS properties suited to aligning regular 'img src' elements would work, however they haven't.
Essentially, I have a page with a gallery. Each image has a city name in it's center. Through research, I've decided to assign a background-image property to three separate divs and used the line-height property matching the height of each image so that the city name aligns itself in the center. The background-image technique assists in the alignment of the city name.
Where am I going wrong?
#jumbotron2 {
height: 500px;
width: 100%;
}
#city-container {
width: 100%;
height: 100%;
}
.london-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
font-family: 'Slabo 27px', serif;
font-size: 32px;
color: #FFFFFF;
line-height: 400px;
text-align: center;
text-shadow: 0px 0px 10px black;
}
<div id="jumbotron2">
<div id="city-container">
<div class="london-square square">
<p id="text">London</p>
</div>
<div class="newyork-square square">
<p id="text">New York</p>
</div>
<div class="sydney-square square">
<p id="text">Sydney</p>
</div>
</div>
</div>
if you use a percentage width of your divs you have to float them too.
I recommand using this:
#city-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-warp: wrap;
}
You can use bootstrap. you put your images inside divs.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/#web/#giftplanning/documents/media/sample-cga-rates-splash-1.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg">
</div>
</div>
Check out this fiddle:
jsfiddle example
I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>