This question already has answers here:
How to place text and image next to each other? [duplicate]
(2 answers)
Closed 2 years ago.
Im new to HTML and I'm trying to align my test and images so they are next to each other.
I want the text to be on the left and the image to be on the right.
#main {
border: 1px solid black;
margin: 20px 20px
}
h3.main {
margin: 5px 5px 10px 5px
}
p.main {
margin: 0px 5px 0px 5px
}
p.left {
vertical-align: middle;
}
img.main {
width: 50%;
height: 100%;
}
img.right {
vertical-align: middle;
}
<div id="main">
<h3 class="main">About Us!</h3>
<p class="main left">Short Bio</p>
<img src="img/code.jpg" class="main right">
</div>
Use flex and the alignment will be taken care by default and also I have removed unnecessary code to make it simple.
#main {
display: flex;
}
.text {
display: flex;
flex-direction: column;
}
.main,
.left {
width: 100px;
}
#main img {
height: 100px;
width: 100px;
}
<div id="main">
<div class="text">
<h3 class="main">About Us!</h3>
<p class="main left">Short Bio</p>
</div>
<img src="http://placekitten.com/301/301" class="main right">
</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 7 months ago.
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
Here I want GeekForGeek to be in the center in the position which is marked yellow here
But it is getting displayed as shown in fig.
For example using a three columns layout (via display flex) on your header.
I made a demo to show the concept:
div.c {
/*width: 60px;*/
width: 60px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
}
.header > div {
/*border just for educational purpose.. remove it*/
border: dashed 3px gray;
flex: 33.33%;
}
.header h1{
text-align: center;
}
/*-----------------------*/
.contents{
border: dashed 3px gray;
margin-top: 1rem;
font-size: 1.5rem;
padding: 1rem;
}
.contents ol li{
margin-bottom: 1rem;
}
<div class="header">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<div>
<h1>GeekForGeek</h1>
</div>
<div>
</div>
</div>
<div class="contents">
<ol>
<li>I took the freedom to change the width of your hamburger menu selector, because it's common practice to have it more square shaped.. yours was very narrow in size;</li>
<li>The 3 columns layout grants you that the block in the middle will be perfectly centered related to the full width of the viewport;</li>
<li>The side effect is having to include the third column despite being empty;</li>
<li>The borders on header's blocks should be removed in the corresponding css rule and were added just to better show off the layout;</li>
</ol>
</div>
use flex and margin auto for h1
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
}
h1 {
margin-left: auto;
margin-right: auto;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 1 year ago.
I have a problem that although I used padding-bottom:0; in style for the class .title but there are still white spaces between .title and #about_restaurant. May I ask if I want to cut the excess white spaces between two elements what is the best way to solve it?
#about_restaurant {
background-color: yellow;
width: 100%;
height: 240px;
padding-top: 0;
display: flex;
align-items: center;
}
.delivery_image {
flex: 0 0 auto;
padding: 1em;
}
.delivery_image img {
display: block;
border-radius: 50%;
}
.describe_restaurant {
float: left;
}
.describe_restaurant h2 {
flex: 1 1 auto;
padding: 1em;
}
.title {
text-align: center;
background-color: aqua;
padding-bottom: 0;
}
<div class="container-fluid">
<div id="About">
<h2 class="title">About Restaurant</h2>
<div id="about_restaurant">
<div class="delivery_image">
<img src="delivery.jpg" width="250" height="250">
</div>
<div class="describe_restaurant">
<h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
</h2>
</div>
</div>
</div>
</div>
That white space is the default margin of the header (<h2></h2>). you can reset it by using: h2 { margin: 0; } in your css file.
Paddings are the inside spacing of an element. However the white-space is not added in the inside of an element but outside. The outside spacing is called margin. As such, padding: 0; wont help you here.
h2 {
margin: 0;
}
#about_restaurant {
background-color: yellow;
width: 100%;
height: 240px;
padding-top: 0;
display: flex;
align-items: center;
}
.delivery_image {
flex: 0 0 auto;
padding: 1em;
}
.delivery_image img {
display: block;
border-radius: 50%;
}
.describe_restaurant {
float: left;
}
.describe_restaurant h2 {
flex: 1 1 auto;
padding: 1em;
}
.title {
text-align: center;
background-color: aqua;
padding-bottom: 0;
}
<div class="container-fluid">
<div id="About">
<h2 class="title">About Restaurant</h2>
<div id="about_restaurant">
<div class="delivery_image">
<img src="delivery.jpg" width="250" height="250">
</div>
<div class="describe_restaurant">
<h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
</h2>
</div>
</div>
</div>
</div>
.title{
text-align:center;
background-color:aqua;
padding-bottom:0;
margin-bottom:0;
}
or :
<h2 class="title" style="margin-bottom:0;">About Restaurant</h2>
This question already has answers here:
CSS center display inline block?
(9 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I can't seem to center a div horizontally inside another div. Here's my html:
.block {
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
}
.container {
margin: 0 auto;
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
It looks like this:
I want the red div centered inside the yellow div. At the moment it is aligned left.
Here's the codepen:
https://codepen.io/carlrippon/pen/MWwaORv?editors=1111
I don't need to support old versions of IE - just IE11
Your red DIV (.container) is an inline-block, that's why margin: 0 auto won't work.
Just add text-align: center; to its parent (.block)
.block {
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
text-align: center;
}
.container {
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
That worked for me:
.block {
text-align: center;
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
}
.container {
margin: 0 auto;
display: inline-block;
background-color: red;
padding: 5px;
}
<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I am trying to align the icons and text within the boxes here:
I can't seem to get the "Store Locator" and icon to align horizontally.
Can anyone please help me achieve this?
My html:
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator <--- problem line
</div>
</div>
Try to use display:inline-flex here
#container {
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.block {
width: 300px;
height: 120px;
margin: 10px;
display: inline-flex;
background: #3f3f3f;
border-radius: 5px;
font-size: 22px;
align-items: center;
justify-content: center;
}
#phone {
color: yellow;
}
#chat {
color: green;
}
#email {
color: white;
}
#store-locator {
color: grey;
}
.store {
background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
background-position: -432px 2px;
position: relative;
right: 10px;
background-size: 1800% auto;
height: 32px;
width: 32px;
display: inline-block;
}
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator
</div>
</div>
This question already has answers here:
Force flex item to span full row width
(2 answers)
Display: flex and new line for captions - what is the proper way?
(1 answer)
Closed 5 years ago.
In the code snippet below, I'm trying to get the "0 of 2 completed" to appear on a new line at full width. I'm attempting to do so with flex box but I'm starting to think that it's not meant to be used in this way. What's the best way to accomplish this?
.container {
display: flex;
width: 400px;
height: 40px;
border: 1px solid blue;
}
.container > div {
height: 20px;
}
.dragHandle {
flex: 0 0 20px;
background-color: rgba(0,0,0,0.2);
}
.checkbox {
flex: 0 0 30px;
background-color: rgba(0,0,0,0.3);
}
.input {
flex: 0 0 auto;
flex-grow: 1;
background-color: rgba(0,0,0,0.1);
}
.avatar {
flex: 0 0 30px;
background-color: rgba(0,0,0,0.3);
}
.footer {
/* appear on new line */
}
<div class="container">
<div class="dragHandle"></div>
<div class="checkbox"><input type="checkbox" /></div>
<div class="input">Task title</div>
<div class="avatar"></div>
<div class="footer">0 of 2 completed</div>
</div>
Simply make it width:100% and add flex-wrap:wrap to container:
.container {
display: flex;
width: 400px;
height: 40px;
border: 1px solid blue;
flex-wrap:wrap;
}
.container > div {
height: 20px;
}
.dragHandle {
flex: 0 0 20px;
background-color: rgba(0,0,0,0.2);
}
.checkbox {
flex: 0 0 30px;
background-color: rgba(0,0,0,0.3);
}
.input {
flex: 0 0 auto;
flex-grow: 1;
background-color: rgba(0,0,0,0.1);
}
.avatar {
flex: 0 0 30px;
background-color: rgba(0,0,0,0.3);
}
.footer {
width:100%; /* Or flex: 0 1 100% Or flex-basis:100%*/
}
<div class="container">
<div class="dragHandle"></div>
<div class="checkbox"><input type="checkbox" ></div>
<div class="input">Task title</div>
<div class="avatar"></div>
<div class="footer">0 of 2 completed</div>
</div>
I would add a new div, inside the container, that would include all the other divs except the footer, then set the new div as display: flex, instead of container. That worked for me.
Also consider using the tag footer instead of div class footer:
.container {
width: 400px;
height: 40px;
border: 1px solid blue;
}
#newDiv {
display: flex;
}
<body>
<div class="container">
<div id="newDiv">
<div class="dragHandle"></div>
<div class="checkbox"><input type="checkbox" /></div>
<div class="input">Task title</div>
<div class="avatar"></div>
</div>
<footer>0 of 2 completed</footer>
</div>
</body>