My problem is with the CSS: I want to center the #product-section, while the .product-img should all be aligned as they are currently. To clarify: I want all products to be centered, but lined up as they currently are.
The parent div (which I want to be centered):
#product-section {
margin: 0;
padding: 0;
padding-left: 15px;
display: inline-block;
margin: 0 auto;
display: inline-block;
background-color: red;
}
The products (which should be lined up as in the picture):
.product-img {
width: 220px;
height: 220px;
border: 2px solid #F3F3F3;
display: inline-block;
margin: 30px 15px 0 0;
vertical-align: top;
}
.product-img img {
display: block;
margin: 0 auto 0 auto;
height: 150px;
width: 80%;
}
.product-img h3 {
height: 50px;
width: 100%;
line-height: 50px;
font-size: 36px;
margin: 20px 0 0 0;
background-color: #F3F3F3;
text-align: center;
font-family: 'Roboto';
color: #6C6C6C;
}
The Header Text
.category {
font-size: 64px;
font-family: 'Open Sans';
width: 100%;
text-align: center;
margin: 50px auto 0 auto;
display: inline-block;
}
HTML
<div id="product-section">
<h2 class="category">Mejeri</h2>
<div id="Mjölk" class="product-img product added"><h4><span>6</span> st</h4><img src="assets/icons/milk.png"><h3>Mjölk</h3></div>
</div>
Related
I'm trying to create a description box for a website in React. The image below is the desired look:
but when I resize the screen to be large, the h1 tag doesn't seem to hold its absolute position anymore. I would like the box to resize like it has with the screen but the "Project 1" title should stay in the same place.
The CSS code to produce the images is:
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
height: 100px;
width: 100%;
background-color: #69143a;
position: absolute;
top: 0;
left: 0;
display: flex;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
display: flex;
flex: 1;
margin: 10% 25px 0;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
and the React component is:
function Project(props) {
return (
<div className="card">
<div className="top">
<h2 className="name">{props.title}</h2>
</div>
<div className="bottom">
<h4 className="supervisor">Supervisor: {props.supervisor}</h4>
<p className="info">{props.description}</p>
<p className="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>
)
}
Any help would be greatly appreciated - been banging my head on the wall all day trying to get it to format correctly.
The root of the issue is the dynamic margin you had set on .name. You can remove that and also remove the position: absolute; and exchange it with relative. Then remove the top padding on .card and you are good to go.
body {
font-family: sans-serif;
margin: 0 auto;
padding: 25px;
max-width: 800px;
min-width: 400px;
background-color: #e0e0e0;
text-align: center;
}
.card {
position: relative;
padding: 0px 0px 25px 0px;
background-color: #ffffff;
margin: 50px 0;
text-align: left;
}
.top {
width: 100%;
background-color: #69143a;
position: relative;
top: 0;
left: 0;
text-align: center;
}
h1 {
position: relative;
display: flex;
}
.name {
font-size: 2em;
color: #ffffff;
padding: 30px;
}
.supervisor {
font-size: 1em;
margin: 20px 20px;
color: #353535;
}
.bottom {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
color: #353535;
}
.info {
margin: 20px 20px;
}
.subjects {
margin: 20px 20px;
font-style: italic;
}
<div class="card">
<div class="top">
<h2 class="name">{props.title}</h2>
</div>
<div class="bottom">
<h4 class="supervisor">Supervisor: {props.supervisor}</h4>
<p class="info">{props.description}</p>
<p class="subjects">Prerequisites: {props.subjects}</p>
</div>
</div>
I want to center 2 images I've set display to block and margin 0 but nothing happens, I've tried the margin on the different divs but also no result. I can't seem to find out what I'm doing wrong,
this is the css:
#partners {
background-color: #FFF;
height: 500px;
margin: auto;
display: block;
}
#partners h2 {
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;
}
.partner1 {
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;
}
.partner1 img {
width: 300px;
}
.partner2 {
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;
display: block;
}
.partner2 img {
width: 300px;
margin: auto;
}
Just assuming your markup here, but you want to add text-align: center to the parent, then make the child block elements display: inline-block, then those elements will be centered in the parent.
You also don't need commas between the padding amounts, and I consolidated some of your CSS.
#partners {
background-color: #FFF;
height: 500px;
margin: auto;
display: block;
text-align: center;
}
#partners h2 {
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;
}
.partner1, .partner2 {
padding: 0px 50px 0px 50px;
margin-top: 125px;
display: inline-block;
}
.partner1 img, .partner2 img {
width: 300px;
}
I'm making a fake news article for a site and I floated the news sections, but I noticed that the bottom borders on the left and the right aren't aligned. I tried to fix this by placing the <h1> and the <p> elements in sections and making the section { height: 45%; } but it didn't work.
Why isn't it working and how can I align the borders? I have the HTML here.
html{
margin: auto;
font-size: 1em;
padding: 0;
max-width: 100%;
text-align: center;
}
figure{
margin: auto;
max-width: 50%;
}
img{
display: block;
}
img, body, ul{
max-width: 100%;
margin: auto;
padding: 0;
}
.caption-clr{
background-color: rgba(0,0,0,.1);
}
*{box-sizing: border-box;}
.main-wrapper{
padding: 2.5% 10%;
max-width: 100%;
margin: 0 10%;
}
body,.main-wrapper{
background-color: lightgreen;
}
header {
color: white;
text-shadow: 1px 0px 5px rgb(0,0,1);
max-width: 100%;
margin: auto;
background-image: url(../img/cannabis.jpg);
padding: 10%;
background-size: cover;
background-position: top;
}
p{
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 0 0 5px 0;
}
.opening-list li{
font-weight: bold;
list-style: none;
}
.opening-list{
margin: 0 0 5px 0;
}
.opening-list li,.opening-list h3{
color: white;
}
/responsive/
#media screen and (min-width: 550px){
section {
height: 45%;
}
body{
background-color: lightgrey;
}
.first-right-section{
float: right;
margin: 2.5%;
width: 45%;
}
.first-left-section{
width: 45%;
margin: 2.5%;
float: left;
}
.clear{
clear: both;
}
}
So, I got this currently:
http://gyazo.com/5d30270a775462fef170283162a9152e
How do I get the second sort of table to be at same position as the button, so in the center? Tried almost everything, can't think of anything else.
Please help me!
Current code:
.flat-table {
display: inline-block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: 90%;
text-align: center;
float: right;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}
This is the code of the table.
What to do?
Thanks!
Make sure that the surrounding div's are floated and align everything in the div to the center by using: margin: 0 auto;
Look at this example:
<div class="top">menu</div>
<div class="middle">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</table>
</div>
<div class="bottom">button</div>
CSS:
.top {
height: 40px;
width: 100%;
float: left;
background-color: Red;
}
.middle {
width: 100%;
height: auto;
float: left;
}
.middle table {
width: 300px;
background-color: grey;
margin: 0 auto;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
}
.bottom {
height: 40px;
float: left;
width: 100%;
background-color: blue;
}
.bottom a {
display: block;
width: 100px;
margin: 0 auto;
height: 20px;
background-color: yellow;
line-height: 20px;
text-align: Center;
margin-top: 10px;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}
Trying to have my buttons centered above the text below. I think it has to do with my float lefts, but i believe i need to still float it left because the content afterwards is also floating.
Margin: 0 auto; isnt working.
Please Advise:
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
vertical-align: middle;
text-align: center;
font-size: 2rem;
display: block;
width: 150px; /* 150 / 980 */
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav a.button {
float: left;
margin: 0 auto;
}
nav a.button:not(:first-child) {
margin-left: 150px;
}
http://jsfiddle.net/117sparten/kNZEs/3/
Here you go.
<header>
<nav>
<div class="btngroup">
contact
blog
</div>
</nav>
</header>
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
text-align: center;
font-size: 2rem;
display: inline-block;
width: 150px; /* 150 / 980 */
}
.button:not(:first-of-type) {
margin-left: 10px;
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav div.btngroup {
width: 410px;
margin: auto;
height:
}
nav a.button {
float: left;
margin: 0 auto;
}
Try change nav a.button like this:
nav a.button {
display: inline-block;
margin: 0 auto;
}
or
nav a.button {
display: inline;
margin: 0 auto;
}
use this inline-block property in button class
.button
{
display:inline-block;
}
and remove float property from nav a.button