I'm relatively new to some concepts in HTML and CSS and this one I can't seem to wrap my head around. I'm trying to align two floating <p> elements to both sides of a centered <img>. Here's what I'm basically trying to achieve.
I want the two texts to stick to the sides of the centered image even when the window is at full width. I have it working only when I resize the window to the point where they're squished to the sides of the image.
.header {
margin-top: 85px;
text-align: center;
}
<div class="header">
<p style="float: left; margin-top: 115px;">listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p style="float: right; margin-top: 115px;">download</p>
</div>
Any help is appreciated, especially since this may be a dumb question. Thanks in advance.
You can use Flexbox or CSS tables Fiddle
.content {
display: flex;
align-items: center;
justify-content: center;
}
<div class="content">
Listen
<img src="http://placehold.it/250x250">
Download
</div>
Do this...
<div class="header">
<p>listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p>download</p>
</div>
And your CSS...
.header { width: 400px; margin: 0 auto}
.header img { margin: 0 20px; float: left; }
.header p { margin: 115px 0 0; float: left;}
You could have just given the container a defined width so the floated elements wouldn't float further away as the window size changes:
.header {
margin-top: 85px;
text-align: center;
width: 370px;
margin: 0 auto;
}
https://jsfiddle.net/8sfvgvgr/
How about flexboxes to obtain this?
header{
display: flex;
justify-content: space-around;
align-items:center;
}
span{
text-align:center
}
img{
margin-left: 10px;
margin-right: 10px;
width: 250px;
}
<header>
<span>Text</span>
<img src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg" alt="Landascape">
<span>Text</span>
</header>
You can do this with Flex.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">listen</div>
<div class="flex-item">Image </div>
<div class="flex-item">Download</div>
</div>
</body>
</html>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
I am building my own personal web page, and while doing the "header" I wasn't able to align my "a" tags to the logo... I've been trying everything, but there are no solutions.
This is my code. If I am wrong in some part, please explain me to not commit the same mistake.
HTML
`
<div class="mainBox">
<!--Logo-->
<div class="navBox">
<img src="Images/Logo3Final.png" alt="logo" id="logo">
</div>
<div class="navBox">
/*About Me*/
</div>
<div class="navBox">
/*Contact*/
</div>
<div class="navBox">
/*Expertise*/
</div>
<div class="navBox">
/*Projects*/
</div>
</div>
`
CSS
`#logo{
max-width: 200px;
max-height: 220px;
right: -100px;
}
/*MENU*/
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
justify-content: space-evenly;
align-items: center;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
height: 20vh;
text-align: center;
top: 50%;
background: transparent;
}
.navBox a:hover{
padding-top: 50%;
background: transparent;
color: var(--text-color);
text-decoration: none;
}
a:visited, a:active, a:link{
text-decoration: none;
color: var(--text-color);
}
.navBox a{
vertical-align: middle;
color: var(--text-color);
padding-top: 0.5rem;
text-align: initial;
}
I try changing position values, I tried giving padding-top, top, margin, nesting into antoher div. But I can not achieve what I will like to be.
Here is a ScreenShot of my page.
You can align .navBox to the center, like this:
.navBox{
/* ... */
display: flex;
align-items: center;
}
or you can remove the height you've specified for .navBox which I think is redundant. It will look like this:
#logo{
max-width: 200px;
max-height: 220px;
}
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
justify-content: space-evenly;
align-items: center;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
text-align: center;
}
<div class="mainBox">
<!--Logo-->
<div class="navBox">
<img src="https://placekitten.com/96/140" alt="logo" id="logo">
</div>
<div class="navBox">
/*About Me*/
</div>
<div class="navBox">
/*Contact*/
</div>
<div class="navBox">
/*Expertise*/
</div>
<div class="navBox">
/*Projects*/
</div>
</div>
The issue is that your logo is overflowing its allocated size, as defined by the .navBox class.
This is what your header looks like as is:
This is what it looks like when applying overflow: hidden to the navBox class. As you can see, the logo is oversized for its container. You need to limit its height and width OR remove the limitation from the container.
Removing the height attribute from navBox makes it look like this:
Looks centered to me.
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've been working on a website for the past few hours and recently I added an image grid using CSS3 Flexbox. However I've been having trouble centering it for the past few hours.
I've tried using justify-content: center to center it as well as margin: 0 auto but nothing works.
What am I doing wrong?
Here's my code
HTML
<div class="gallery">
<h3>Gallery</h3>
<div class="tiles">
<div class="row">
<div class="column">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Mahatma-Gandhi%2C_studio%2C_1931.jpg">
<img src="https://www.biography.com/.image/t_share/MTYyNzM4ODIyODY0NDQ2NTA0/gandhi-spiritual-leader-leading-the-salt-march-in-protest-against-the-government-monopoly-on-salt-production-photo-by-central-pressgetty-images.jpg">
</div>
<div class="column">
<img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201911/Mahatma_Gandhi-770x433.png?DtfYcyk4yzMDy1GNsIJaQgX7mrBoqTQO">
<img src="https://images.news18.com/ibnlive/uploads/2018/10/Mahatma-Gandhi2.jpg">
</div>
<div class="column">
<img src="https://images.livemint.com/img/2019/10/02/600x338/gandhi_1570037914879.JPG">
<img src="https://m.telegraphindia.com/unsafe/620x350/smart/static.telegraphindia.com/derivative/THE_TELEGRAPH/1671172/16X9/image34ba57f1-21d2-4af6-ad21-b9c036e39194.jpg">
<img src="https://img.etimg.com/thumb/msid-67754218,width-640,resizemode-4,imgsize-184267/he-whom-leaders-looked-up-to.jpg">
</div>
</div>
</div>
</div>
CSS
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.gallery {
height: auto;
width: 100%;
text-align: center;
}
.gallery h3 {
font-size: 60px;
margin-bottom: 40px;
}
.tiles {
display: block;
width: 100%;
margin: 0 auto;
}
How do I center the tiles div?
if you want to have 3 columns in the center of you screen, you have to:
put the display: flex; justify-content: center in the .tiles class
change the column width property to width: 33% and removing the max-width: 25%
give to your .row class the width you want, or the max-width, like max-width:75%
I have 3 squares, side-by-side of different heights. I want them to be bottom-aligned with each other, but I want the entire group center-aligned within a containing box.
Seems like putting them in a wrapper whose style is vertical-align:middle should do it. But nope, it doesn't work.
Any suggestions on how to do this?
https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview
#red {
background-color: #FF0000;
height: 20px;
width: 20px;
}
#green {
background-color: #00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color: #0000FF;
height: 40px;
width: 40px;
}
#container {
width: 300px;
height: 100px;
border: thin solid black;
}
#wrapper {
vertical-align: middle;
}
body {
font-size: 0;
}
<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>
#container {
display: table;
}
#wrapper {
display: table-cell;
}
http://codepen.io/Deka87/pen/oYXOwg
You should use a table layout if not eager to use flexbox.
Try to use display: flex;.
The #container should have an align-items: center; property, and the #wrapper need an align-items: flex-end;
You can change align-items for this following options:
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width)
Here for more about Flex
And back to your question. Look at this example:
#red {
background-color:#FF0000;
height: 20px;
width: 20px;
}
#green {
background-color:#00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color:#0000FF;
height: 40px;
width: 40px;
}
#container {
display: flex;
align-items: center;
width: 300px;
height:100px;
border: thin solid black;
}
#wrapper {
display: flex;
align-items: flex-end;
}
body {
font-size:0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>
</html>
Fiddle demo
I have a portfolio website and I'm trying to align the pictures in the center of the page. I've tried
text-align
and
margin
but nothing seems to work. The code and CSS are as follows:
<div class="body">
<div class=responsive>
<div class=image>
<img class="gallery" src="../pics/placeholder.png">
<p></p>
</div>
</div>
and
.body {
text-align: center;
padding-top: 20px;
float: left;
}
.responsive {
padding: 5px;
float: left
}
.gallery {
width: 250px;
height: 250px;
}
Remove float:left from .responsive and add width:100% to .body
Then you don't need float on .body also.
But it all depends how you want to design your page.
Right now the float: left without the set width is messing up your ability to center things.
Are you looking for something like this?
.body {
padding-top: 20px;
float: left;
width: 100%;
}
.responsive {
padding: 5px;
float: left;
width: 100%;
}
.image {
margin: 0 auto;
width: 250px;
}
.gallery {
width: 100%;
height: auto;
}
<div class="body">
<div class="responsive">
<div class="image">
<img class="gallery" src="https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg">
<p></p>
</div>
</div>
</div>