I'm trying to get everything in my header to get centered in the header table, but I can't figure out how. I managed to get it centered vertically but I can't figure out how to get it centered horizontally. Can you please tell me how to do it? https://fiddle.jshell.net/rgfxs94L/2/
<div id="header">
<div class="center">
<div class="header_cells">
<img onclick="get_page('?page=home');" title="logo" id="logo" src="http://www.rajohan.no/img/logo_small.png">
</div>
<div id="main_buttons" class="header_cells">
<div id="home" class="header_cells">
<Home>
</div>
<div id="cv" class="header_cells">
<CV>
</div>
<div id="nyheter" class="header_cells">
<Nyheter>
</div>
<div id="movie" class="header_cells">
<Film>
</div>
<div id="games" class="header_cells">
<Spill>
</div>
<div id="music" class="header_cells">
<Musikk>
</div>
</div>
<div class="header_cells">
<form id="search_form">
<input type="search" id="search_box" placeholder="Søk...">
</form>
</div>
</div>
</div>
#header {
border-top: 3px solid #e87f29;
background-color: #f8f8f8;
min-width: 100%;
min-height: 100%;
position: static;
border-bottom: 1px solid #e8e8e8;
display: table;
}
.center {
text-align: center;
}
.header_cells {
display: table-cell;
min-height: 100%;
min-width: 100%;
vertical-align: middle;
}
#logo {
width: auto;
max-height: 40%;
}
Use inline-block instead:
https://fiddle.jshell.net/o4u8per4/
.header_cells {
display:inline-block;
vertical-align: middle;
}
Related
I am currently working on a project which is a mobile-first e-commerce responsive website. I am trying to create a sliding div of products detailing the top selling range.
The idea is to allow the user to click on either the left or right slide-arrows and the products range will slide accordingly - a feature Im sure you have probalby seen on on most e-commerce websites.
Right now I am on the design aspect of creating this section but for some reason I can not center the images which appear in the divs. Am i disributing the percentages correctly? I plan on showing one product image in the mobile version but 3 in the desktop version.
My code is shown below.
HTML:
/* TOP SELLING RANGE SECTION */
.mobile-topselling-slideshow {
display: flex;
align-items: center;
}
.top-selling-arrows {
width: 10%;
text-align: center;
color: green;
font-size: 2em;
}
#top-selling-slider {
position: relative;
width: 80%;
overflow: hidden;
}
#top-selling-productdetails {
z-index: 60000;
display: flex;
width: 600%;
}
.topseller-sliding-divs {
width: 13.3%
}
.topseller-sliding-divs img {
width: 100%;
display: inline-block;
margin: auto;
}
<div class="content-container">
<section class="special-offers">
<h1>THIS WEEK'S TOP SELLERS</h1>
<div class="mobile-topselling-slideshow">
<div id="left-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-left"></i>
</div>
<div class="topselling-products">
<div id="top-selling-slider">
<div id="top-selling-productdetails">
<div id="item1topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item2topseller" class="topseller-sliding-divs">
<img src="images/sports/1.jpg" />
</div>
<div id="item3topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item4topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item5topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item6topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
</div>
</div>
</div>
<div id="right-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-right"></i>
</div>
</div>
</section>
</div>
An image of the outcome is also shown below
Just try, replace these two classes with your code and check:
.topseller-sliding-divs {
width: 13.3%;
text-align: center;
}
.topseller-sliding-divs img {
margin: 0 auto;
max-width: 100%;
}
When you use display: flex; then for aligning its content to center, you have to use justify-content:center; not text-align: center;
Try this.
.special-offers h1{
text-align: center;
}
.mobile-topselling-slideshow {
display: flex;
justify-content: center;
}
.top-selling-arrows {
width: 10%;
text-align: center;
color: green;
font-size: 2em;
}
#top-selling-slider {
position: relative;
width: 80%;
overflow: hidden;
}
#top-selling-productdetails {
z-index: 60000;
display: flex;
width: 600%;
}
.topseller-sliding-divs {
width: 13.3%;
text-align:center;
}
.topseller-sliding-divs img {
margin: 0 auto;
max-width: 100%;
}
<div class="content-container">
<section class="special-offers">
<h1>THIS WEEK'S TOP SELLERS</h1>
<div class="mobile-topselling-slideshow">
<div id="left-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-left"></i>
</div>
<div class="topselling-products">
<div id="top-selling-slider">
<div id="top-selling-productdetails">
<div id="item1topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item2topseller" class="topseller-sliding-divs">
<img src="images/sports/1.jpg" />
</div>
<div id="item3topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item4topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item5topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
<div id="item6topseller" class="topseller-sliding-divs">
<img src="images/sports/5.png" />
</div>
</div>
</div>
</div>
<div id="right-scroll-topselling" class="top-selling-arrows">
<i class="fas fa-caret-right"></i>
</div>
</div>
</section>
</div>
I have been writing some code for a website, and I'm not able to vertically center text. I have read multiple answers on StackOverflow and other sites about how to vertically center html (mainly using the display:table and display:table-cell methods and the top:50%, transformY method), however, I am not able to implement either of these methods successfully. I have attached my code here, hoping that someone will be able to spot an error of my mine which is causing the code to not work. (In this code, I have used the top:50%, transformY method of vertically centering text). Any help would be greatly appreciated.
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<title>Game Timer and Scorekeeper</title>
</head>
<body>
<div class="container-fluid">
<div class="row" id="heading">
<div class="col-xs-12">
<div class="positioner">
<h1>Game Timer and Scorekeeper</h1>
</div>
</div>
</div>
<div class="row" id="top-labels">
<div class="col-xs-3 labels teamlabel" id="a-label">
<div class="positioner">
<h2>Team A</h2>
</div>
</div>
<div class="col-xs-6 labels" id="gameclock-label">
<div class="positioner">
<h2>Game Clock</h2>
</div>
</div>
<div class="col-xs-3 labels teamlabel" id="b-label">
<div class="positioner">
<h2>Team B</h2>
</div>
</div>
</div>
<div class="row" id="thirdrow">
<div class="col-xs-3 pointsclock teampoints" id="pointsA">
<div class="positioner">
<h1>POINTS A</h1>
</div>
</div>
<div class="col-xs-6 pointsclock" id="gameclock">
<div class="positioner">
<h1>GAME CLOCK</h1>
</div>
</div>
<div class="col-xs-3 pointsclock teampoints" id="pointsB">
<div class="positioner">
<h1>POINTS B</h1>
</div>
</div>
</div>
<div class="row" id="fourthrow">
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
<div class="positioner">
<h2>CONTROL A</h2>
</div>
</div>
<div class="col-xs-6 ptcontclock" id="questionclock">
<div class="positioner">
<h2>QUESTION CLOCK</h2>
</div>
</div>
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
<div class="positioner">
<h2>CONTROL B</h2>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container-fluid {
width: 100vw;
height: 100vh;
}
#heading {
height: 15vh;
border: 2px solid;
}
#top-labels {
height: 10vh;
border: 2px solid;
width: 100vw;
}
#top-labels .labels {
border-right: 2px solid;
border-left: 2px solid;
}
#thirdrow {
height: 40vh;
border: 2px solid;
width: 100vw;
}
#thirdrow .pointsclock {
height: 40vh;
border-right: 2px solid;
border-left: 2px solid;
}
#fourthrow {
height: 35vh;
width: 100vw;
}
#fourthrow .ptcontclock {
border-right: 2px solid;
border-left: 2px solid;
height: 35vh;
}
.positioner{
height:100%;
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can try this.
HTML
<main>
<div>
I'm a block-level element with an unknown height, centered vertically
within my parent.
</div>
</main>
CSS
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
check this link for reference https://css-tricks.com/centering-css-complete-guide/
I'am new into basics of HTML and CSS.
Trying to create 3 x 3 square "picture", using , but can't find simple solution to put squares in the middle of the page, like nine square in center.
How to put all squares in the big bordered square?
How can we achieve this?
HTML:
<body>
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
</body>
CSS:
body {
background-color: #000000;
font-size: 150px;
}
div {
background: #FFFFFF;
width: 275px;
height: 275px;
margin: 10px 10px 10px 10px;
float: left;
}
Read about display: inline-block CSS property. I think you wants to get the following layout.
body {
background-color: #000;
font-size: 150px;
text-align: center;
}
.square-holder {
border: 1px solid #fff;
display: inline-block;
vertical-align: top;
letter-spacing: -4px;
width: 285px;
font-size: 0;
}
.square {
background: #fff;
letter-spacing: 0;
font-size: 150px;
width: 75px;
height: 75px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
<body>
<div class="square-holder">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
</body>
Use text-align - CSS with display - CSS
body {
background-color: #000000;
font-size: 150px;
text-align: center /* add this */
}
div {
background: #FFFFFF;
width: 25px;
height: 25px;
margin: 10px;
/*float: left; */
display: inline-block/* add this */
}
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
I'm trying to do the next thing:
so I tried it by:
http://jsfiddle.net/7ewrM/22/
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div class='img-container'>
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
<div class='img-text'>Mark zuckerberg</div>
</div>
</div>
<div class="col-xs-8">
some text
</div>
</div>
</div>
Any help appreciated!
.container {
border: 1px solid red;
padding: 0;
}
.img-container{
padding: 0 10px;
}
.imggg {
display: inline-block;
width: 25%;
padding: 10px;
border-right: 1px solid red;
}
.text {
width: 70%;
display: inline-block;
}
.marc-zuckerberg{
border-top: 1px solid red;
width: 100%
display:inline-block;
}
<div class="container">
<div class='img-container'>
<div class="imggg">
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
</div>
<div class='text'>text</div>
</div>
<div class='marc-zuckerberg'>Mark zuckerberg</div>
</div>
Here you go: http://jsfiddle.net/7ewrM/24/
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}