So I have this image I'm trying to align to the middle of the web frame with my CSS file style.css but I'm not sure how to, how can I do this?
body {
background-color: black;
}
h1 {
text-align: center; font-family: sans; color: blue;
}
p {
text-align: center; font-family: sans; color: white;
}
a {
text-align: center;
}
<h1>Pages</h1>
<p>Page Two</p>
<p>Page Three</p>
<img src="https://via.placeholder.com/100.jpg" alt="Discord" style="width:42px;height:42px;">
Simple solution:
<img src="https://via.placeholder.com/100.jpg" alt="Discord" style="width:42px;height:42px;display:block;margin-left:auto;margin-right:auto">
Wrap your a tag in a flex container.
.container {
display: flex;
justify-content: center;
}
.container a img {
width: 300px;
height: 300px;
}
<div class="container">
<a href="https://en.wikipedia.org/wiki/Universe">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/69/NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg" />
</a>
</div>
Alternatively you can wrap it in a grid container and place items center and set the width and height to 100vw/vh respectively.
.container {
display: grid;
place-items: center;
height: 100vh;
width: 100vw;
}
.container a img {
width: 200px;
height: 200px;
}
<div class="container">
<a href="https://en.wikipedia.org/wiki/Universe">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/69/NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg" />
</a>
</div>
Related
So I have a 3 flexboxes and flex items inside of them. I need them to be on the left, like on the following image:
But for some reason my image and header are stuck on the right, and can't even be aligned with align-items.
So I have the following result:
I'm not really sure what's the problem here, I tried to do float:left for image, but it doesn't move.
art_container is a huge container, inside of which are 3 flexboxes - art_block, and flex items inside of them.
.article img{
position: absolute;
top:0;
right:0;
}
.art_container {
position: relative;
top: 10%;
left: 0;
/* transform: translateY(30%) translateX(30%); */
width: 100vh;
height: 110vh;
background-color: white;
}
.art_block {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-width: 100%;
height: 300px;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: 1 1 auto;
width: 300px;
height: 200px;
object-fit: cover;
border: 2px solid red;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
}
<article class="article">
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<h2>Sony's new releases for 2018</h2>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<h2>10 tips to be a better gamer</h2>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<h2>Microsoft has some new tips</h2>
</div>
</div>
</article>
Edit: so i've found that i have another image style for outside container, which i guess may affect my flex image:
.article img{
position: absolute;
top:0;
right:0;
}
So that's a style for a bigger div, inside of which is my art_container, and now i'm wondering, how could i make .art_container img style, while not being affected by .article img style?
Sometimes the best strategy is just to step back and simplify. I'm not sure why you have all the fixed sizing on the images and containers, but that's probably not necessary. If you have minimum sizes in mind, use other means to ensure that, such as wrapping to vertical using media queries. The more you stay flexible the simpler your layout will be.
Here's a start.
.art_block {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: none;
max-width: 200px;
object-fit: cover;
border: 2px solid red;
margin: 15px;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
margin: 15px;
}
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<h2>Sony's new releases for 2018</h2>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<h2>10 tips to be a better gamer</h2>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<h2>Microsoft has some new tips</h2>
</div>
</div>
Simply use flex-wrap: no-wrap; so your image and text remains on the same line.
I've add a wrapper for your text so you can add some p tags inside
.art_container {
position: relative;
top: 10%;
left: 0;
/* transform: translateY(30%) translateX(30%); */
width: 100%;
height: 110vh;
background-color: white;
}
.art_block {
position: relative;
display: flex;
flex-wrap: no-wrap;/* use this */
min-width: 100%;
height: 300px;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: 1 1 auto;
width: 300px;
height: 200px;
object-fit: cover;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
}
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>Sony's new releases for 2018</h2>
</div>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>10 tips to be a better gamer</h2>
</div>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>Microsoft has some new tips</h2>
</div>
</div>
</div>
HTML CODE
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<img src="img\xii.jpg" alt="phone1" />
<section class="section1">
<p>Xiaomi X15</p>
<br />
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<br />
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
CSS CODE
.flex-container {
display: flex;
background-color: #fff;
border: 2px solid black;
flex-wrap: wrap;
}
.wrapper {
width: 100px;
max-width: 960px;
margin: 0 auto;
}
.one p {
position: absolute;
bottom: -350px;
color: white;
font-size: 50px;
left: 500px;
text-align: center;
font-weight: lighter;
font-family: calibri;
}
.section1 h2 {
position: absolute;
bottom: -500px;
left: 300px;
color: white;
}
please help im a beginner in css and this is my first stackoverflow post
my texts are not horizantally in place and keeps breaking down that each word forms a new paragraph how can i solve this please? i have tried the display:inline- block but it didnt work.as you can see from my code i made the div tag that the image is on to be position relative so i can move the h2 and span and button elements to be nn the image. i intend on using flexbox because on i want to position more images to be on the side of the initial image
What you can do is:
Define some width and height (max-width and min-width to be more flexible) for your box;
Use background-image CSS prop instead of HTML <img />, which will ensure the image fills the background of your container;
Use flex-box with its all properties to lay out your elements. There will be no need for position: absolute for the text and header.
Other notes to your code: there are some closing tags missing in your HTML as well as closing } braces in the CSS. That is never a good practice to leave your code without them, even though in some cases the browser can fill them out for you.
Here is an example of how you can achieve what you were asking about:
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto ;
display: flex;
justify-content: space-between;
}
.flex-container{
display: flex;
background-color:#fff;
border: 2px solid black;
flex-wrap: wrap;
width: auto;
height: 200px;
min-width: 100px;
max-width: 400px;
}
.one {
background-image: url('https://cdn.thewirecutter.com/wp-content/uploads/2018/05/smartphone-tp-top-2x1-lowres1024-7951.jpg');
background-size: cover;
}
.section1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.section1 p{
color: white;
font-size: 25px;
text-align: left;
font-weight: lighter;
font-family: calibri;
padding: 10px;
margin: 0
}
.section1 h2{
color: white;
padding: 10px;
margin: 0
}
button {
max-width: 100px
}
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
I would like to create a grid with a center svg icon with descriptive text in the button position, like this:
but unfortunately I can not align everything correctly
My code:
.colonna {
flex: 50%;
padding: 10px
}
.icona {
width: 100%
}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.icon-64 {
width: 64px;
height: 64px;
}
<div class="riga">
<div class="colonna centro-div">
<div class="icona"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64"></div>Cerca Hotel</div>
<div class="colonna centro-div"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64"><br> Cerca Volo</div>
</div>
how can I fix this?
Try with this example,
i have updated some style in your css.
.colonna {
flex: 50%;
padding: 10px;
}
.icona {
width: 100%;
border:2px solid #ddd;
padding:20px;
width:200px;
text-align:center;
}
.icona img{display:block;}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.icon-64 {
width: 64px;
height: 64px;
margin:0 auto;
}
<div class="riga">
<div class="colonna centro-div">
<div class="icona">
<img src="https://banner2.kisspng.com/20171220/oqq/rainbow-png-image-5a3ad6797f9c30.14712925151380543352278356.jpg" alt="Prenota Hotel" class="icon-64"/>
<span>Cerca Hotel</span>
</div>
</div>
</
</div>
Hope this will be helpfull for you.
You should use display:flexalso on the row and adjust your html structure just a little:
.riga {display: flex}
.colonna {
flex: 50%;
padding: 10px
}
.icona {
width: 100%
}
.centro-div {
display: flex;
display: -webkit-flex;
align-items: center;
/*justify-content: center;*/
}
.icon-64 {
width: 64px;
height: 64px;
vertical-align:middle
}
<div class="riga">
<div class="colonna centro-div">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64">
<p>Cerca Hotel</p>
</div>
<div class="colonna centro-div">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64">
<p>Cerca Volo</p>
</div>
</div>
Image with text center
If you want the text ti be in the center we can do two simple things to center it
If the text is larger then the image:
We center the image inside its container with margin: 0 auto; and display:block;
see Margin 0 auto
If the text is smaller then the image
We can simply set text-align: center;.
We cant use text-align center alone if the text is larger. This is because it container will grow with the text, but the image will just be left aligned.
/*Divs are by default block displayed. We don't want them to take all width*/
.image-block {
display: inline-block;
padding: 10px;
}
/*text larger then container*/
.image-block img {
display: block;
margin: 0 auto;
}
/*Container smaller then text*/
.image-block .text {
text-align: center;
}
<div>
<div class="image-block">
<img src="https://picsum.photos/100" />
<div class="text">Image text below image</div>
</div>
<div class="image-block">
<img src="https://picsum.photos/100" />
<div class="text">desc</div>
</div>
</div>
I need to position elements on a side like in the image above and have onclick function on them to show the corresponding text. Any info on how to best achieve this to be responsive?
By responseive i mean that the dots and text should always stay on the same position relative to the size of the bottle.
What I did was to put everything inside the container div and then positioned the elements relative to that div and the bottle image absolute to the container div.
It kinda works when container div has fixed dimensions, but I guess there are better ways to do it.
EDIT: Added code! I suck at formatting, sorry.
<div class="bottle-one">
<div class="bottle-one-content">
<div class="bottle-one-image">
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
</div>
<a href="#msg1" class="droplet droplet1 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg2" class="droplet droplet2 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg3" class="droplet droplet3 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg4" class="droplet droplet4 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
</div>
</div>
.bottle-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.bottle-one-image {
height: 100%;
position: relative;
width: 251px;
}
.message {
left: -340px;
top: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
text-transform: uppercase;
font-size: .7rem;
color: #004197;
height: 30px;
width: 400px;
margin-bottom: 1rem;
}
.message-hidden {
display: flex;
}
.message-hidden div:nth-of-type(1) {
text-align: right;
font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
letter-spacing: 2px;
border-right: 1px solid #004197;
width: 70%;
}
.message-hidden div:nth-of-type(2) {
width: 30%;
display: flex;
overflow:hidden;
}
I came up with this to help you with aligning your element to the left of a div.
By using a mix of [psuedo-elements] and floats, I think this gives you the desired effect you are looking for. Post your code and I'll be more then happy to help you with the other part.
html {
width: 550px;
border: none;;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
height:200px;
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.sibling {
border: 3px solid red;
height:200px;
}
.sibling.root:after {
content: 'Sibling';
color: green;
}
.float {
float: left;
border: 3px solid blue;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'floated Element';
color: red;
}
.root {
overflow: hidden;
}
<div class="float">
</div>
<div class="sibling root">
</div>
How can I center my h1 tag into the middle of my banner without setting a padding?
HTML
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
CSS
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
}
Can you do something with vertical-align: middle; and display: table-cell; etc?
There's several options, I recommend looking through this - https://css-tricks.com/centering-css-complete-guide/
One option would be: http://jsfiddle.net/dtq7fed3/ which uses a line-height on the container that is the same of the height of the banner.
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
text-align: center;
line-height: 500px;
color: #fff;
}
This only works if the banner height is going to remain stagnant
Using transform, you can position in centrally like so: http://jsfiddle.net/otghf6zo/1/
adding this code will position the title in the exact middle of the containing div regardless of size.
h1 {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can use CSS table like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: table;
text-align: center;
color: white;
}
.bannerContainer {
display: table-cell;
vertical-align: middle;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
Or Flexbox like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>