I have an image and some text. I currently have the text and image center, however I want the contents class to be on the right hand side of the image (vertically aligned). I have tried vertical align but it does not seem too work. Could someone help me please?
where I want text to be
https://jsfiddle.net/skriker11/3t7asmhf/1/
.card{
border: solid red;
text-align: center;
}
img{
border: 1px solid red;
margin: auto;
vertical-align: middle;
}
.card > .content h3, p {
margin: 0;
}
.content {
display: flex;
flex-direction: column;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<h1>Title of widget</h1>
<div class='content'>
<img src="https://placeimg.com/640/480/tech" width='100' height=100/>
<p>Sydney</p>
<h3>26</h3>
<p><strong>Wind</strong></p> <p>NE 24km/h</p>
</div>
</div>
</body>
</html>
Here's what you could do, mind the comments with FIX:
.card{
border: solid red;
/* FIX: make the card as flexbox with direction of column */
display: flex;
flex-direction: column;
align-items: center;
}
img{
border: 1px solid red;
vertical-align: middle;
}
.card > .content h3, p {
margin: 0;
}
.content {
/* FIX#2: flexbox with direction of row */
display: flex;
align-items: center;
}
<div class="card">
<h1>Title of widget</h1>
<div class='content'>
<img src="https://placeimg.com/640/480/tech" width='100' height=100/>
<!-- FIX: wrap all texts in a div -->
<div class="description">
<p>Sydney</p>
<h3>26</h3>
<p><strong>Wind</strong></p> <p>NE 24km/h</p>
</div>
</div>
</div>
Related
I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I have problem with flex-wrap. When I set it and set width of child to 100% (to take entire "line"), it dont shrink.
Look at my code:
https://codepen.io/dinoq-the-reactor/pen/OJRJoNm
HTML:
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">Text on new line</div>
</div>
<div>
</div>
CSS:
#main-container{
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container{
width:100%;
}
.flex-container {
background-color:blue;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
background: grey;
color: white;
font-size: 3em;
}
#i2{
flex: 1;
}
#i4{
flex: 0 0 100%;
}
What I want is to achieve something like this:
Instead I got this:
Note: I really need use "flex-wrap" and html structure which I have... It is part of bigger project, and I can edit only CSS...
Note2: My container is so expanded because width of it is width of all child elements, so it counts width of my 4. child (which is on new line). This is some source of problem, but how it solve?
Thanks!
Below is the solution for your problem.
#main-container {
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container {
width: 100%;
}
.flex-container {
background-color: gray;
font-size: 0;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
color: white;
font-size: 3em;
display: inline-block;
font-size: 3rem;
}
.flex-item:last-child {
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">People of this world are travellers</div>
</div>
<div>
</div>
</body>
</html>
I want to make my div elements be centered in the same line. I want it to be done without using a fixed margin because that doesn't work as soon as you resize it or change screen resolution.
I've tried using "margin: 0 auto" but that didn't seem to work. I've also trid a couple of different things but they were honestly all just me kicking in the dark.
The HTML:
<div class="container div3">
<div class="sredina">
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
</div>
The CSS:
.box{
text-align: center;
width: 20%;
border: 2px solid blue;
margin: 1pt;
float: left;}
.div3{
text-align: center;}
.sredina{
display: inline-block;
margin: auto;
border: 2px solid red;}
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
How it looks now:
An image of how it looks now
How I want it to look:
An image of how it should look
Use display: flex and justify-content: center on the the .sredina div within your container:
https://codepen.io/HappyHands31/pen/qwvEez
Try to use flex for your .sredina
https://codepen.io/anon/pen/zXbxym
.sredina{
display: flex;
justify-content: center;
align-items: strentch;
margin: auto;
border: 2px solid red;
}
Try this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
background: #87ceeb;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
}
.inner{
display: inline-block;
min-height: 100px;
height: 100px;
background: chartreuse;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">hello</div>
<div class="inner">hello</div>
<div class="inner">hello</div>
</div>
</body>
</html>
it works well in all screen sizes. You must use
display: inline-block;
in the inner div class
then use
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
in the outer div.
A similar answer is here
Here's the code:
JsFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../test.css">
<title>Test title</title>
</head>
<body>
<nav id="user-nav">
<div id="logo-container">
<img src="img/logo.svg" alt="Loading logo">
<p>This is a site</p>
</div>
<div id="form-container">
<i id="search-icon"></i>
<input type="text" name="search" id="form-search" autocomplete="off" placeholder="Quick search...">
</div>
<div class="links">
Home
Services
About
</div>
<div class="profile-link">
Profile name
<div class="drop-menu">
Switch
Log out
</div>
</div>
</nav>
</body>
</html>
and CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: chocolate;
}
#user-nav {
display: flex;
height: 62px;
position: fixed;
background-color: #333;
width: 100%;
border-bottom: 2px solid #fff;
}
#logo-container img {
width: 96px;
height: 60px;
}
#logo-container {
display: flex;
flex-grow: 2;
}
.profile-link {
flex-grow: 1;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
border-left: 1px solid #fff;
height: 100%;
}
.drop-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
background: #333;
border-left: 1px solid #fff;
width: 100%;
}
I removed all extra css from other elements in navbar because i thought it was affecting the last divs but it didn't affect the misalignment. I tried different display properties for the div that holds profile name even using list instead of div for drop-down-menu, i always get this offset of 1px. I am styling the navbar using flex because i want to make it more responsive, i am not sure is this somehow affecting the issue.
I am trying to put four elements in four corners of a flex-container using Flexbox and I'm struggling. I can't figure out how to justify the content of individual flex-items. Everytime I try, it ends up putting all content of the flex-container either to the left or right (or top/bottom depending on the main axis).
HTML:
<div class="container">
<div class="top-left">
TL
</div>
<div class="top-right">
TR
</div>
<div class="bottom-left">
BL
</div>
<div class="bottom-right">
BR
</div>
</div>
Here is my CSS:
.container {
display: -webkit-flex;
background-color:#ccc;
}
.top-left {
/* ? */
}
.top-right {
}
.bottom-left {
}
.bottom-right {
}
Here is a fiddle that illustrates what I'm trying to do:
http://jsfiddle.net/JWNmZ/8/
Here is one approach for this (omitted prefixes for clarity): http://jsfiddle.net/JWNmZ/10/
.container {
display: flex;
flex-wrap: wrap;
background-color:#ccc;
}
.top-left {
flex: 50%;
}
.top-right {
flex: 50%;
text-align: right;
}
.bottom-left {
flex: 50%;
}
.bottom-right {
flex: 50%;
text-align: right;
}
#wrapper {
width: 500px;
height: 500px;
background-color: red;
display: flex;
flex-flow: wrap row;
justify-content: space-between;
}
#wrapper>div{
display:flex;
flex-flow:wrap column;
justify-content:space-between;
}
.child {
width: 50px;
height: 50px;
background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<div>
<div class='child'></div>
<div class='child'></div>
</div>
<div>
<div class='child'></div>
<div class='child'></div>
</div>
</div>
</body>
</html>