I'm trying to center an image but it doesn't works :(
I use the parameter text-align: center;. The size of the image is 600x600px and I need to center horizontal in the website.
My code is:
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
At moment it shows:
Could you help me?
Thanks!
try this code for the .img-sugarCSS:
.img-sugar{
width: 600px;
height: 600px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
try this css, you have some syntax error and spelling mistake
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="http://placehold.it/350x150"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
</body>
If you would insert your img via css it would be easiely done with this here:
.img{
background:url(yourimg.png) center center no-repeat;
}
margin: 0 auto you forgot to end with semicolon ;
.img-sugar{
width: 600px;
weight: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
Use the below mentioned Padding value.
#share-buttons img {
width: 50px;
padding: 100px;
border: 0;
box-shadow: 0;
display: inline;
}
try with this code
.img-sugar{
width: 600px;
weight: 600px;
display: block;
position: absolute;
vertical-align: center;
horizontal-align: center;
}
maybe this works?
Related
I'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.
Here is my program:
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!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>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.
Similar question: link
I have also tried what is mentioned in the Similar question but still it doesn't work...
The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.
On the hover you are defining a variable that only has scope within the navbar element.
To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
}
#navbar:hover + #editor {
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!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>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/
This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}
I want to be able to display 3 colums with images, titles and buttons shown below. I know I am using split left and right but I am unable to create 3 columns on my own. I am using this for my portfolio, if you require anymore information or an example of my portfolio so you can understand what I would like then please do ask.
<!DOCTYPE html>
<html>
<head>`enter code here`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="fix">
<div class="nav-area">
<ul class="menu-area">
<li>Home</li>
<li>Coursework</li>
<li class="active">Future Aspirations</li>
<li>About Me</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div class="banner-text-name">
<h2>Joe Busby</h2>
</div>
</header>
<div class="split left">
<div class="centered">
<img src="Assets/coding.png" alt="Online World">
<h2>Website Developer</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="Assets/shield.png" alt="Security">
<h2>Security Analyst</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
</body>
</html>
//CSS//
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.left h2 {
color: aliceblue;
font-family: sans-serif;
}
.right h2 {
color: aliceblue;
font-family: sans-serif;
}
.right {
right: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
}
you could always use bootstrap as already said.
if you rather do it with pure css and html see http://jsfiddle.net/a6yecjqb/4/
.split {
height: 100%;
width: 33.33%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.center {
left:33%;
right:33%;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
if you change the width of split and add a center block you will get 3 div's in separate rows. if more explanation is needed let me know
Why not using grid?
div.example {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
When you create elements inside that div, they will appear automatically in 33%
You can do that by using flexbox: here is a quick example:
body {
background: gray;
}
.wrapper {
margin: 0 auto;
width: 500px;
display: flex;
}
.columns {
padding: 5px;
color: black;
position: relative;
height: 500px;
overflow-x: hidden;
background: white;
margin-right: 5px;
}
.columns h2 {
color: black;
font-family: sans-serif;
}
.centered img {
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/xipeduxuda/
the layout I'm trying to make
Can anyone help me how to put the div below the carousel? I'm kinda new to this
Give the carrousel a z-index: 5; and position: relative; and give the div you want under it a position: relative; and top: -value where value is the pixels you want it to go up.
Instead of the <div class="carousel"> use your own carrousel div. and same with the header.
For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
header {
height: 80px;
width: 100vw;
background-color: yellow;
position: relative;
}
nav {
height: 40px;
width: 100vw;
background-color: pink;
position: absolute;
bottom: 0;
}
.carousel {
width: 100vw;
height: 100px;
background-color: RGBA(0,255,0,0.4);
z-index: 5;
position: relative;
}
.classname {
width: 80vw;
height: 200px;
background-color: lightblue;
display: block;
margin: 0 auto;
position: relative;
top: -40px;
}
header,
nav{
text-align: center;
line-height: 40px;
}
.carousel{
text-align: center;
line-height: 100px;
}
.classname{
text-align: center;
line-height: 200px;
}
<header>
Header
<nav>
Nav
</nav>
</header>
<div class="carousel">
Carousel
</div>
<div class="classname"> DIV below carousel</div>
You can try this solution. Using margin top.
JSFiddel Link: https://jsfiddle.net/VrtuosArs/9h8djmy2/1/
body {
color: #000;
}
header {
background: yellow;
padding: 0.1rem;
}
.headertext {
text-align: center;
color: #000;
}
nav {
background: #FF9EC5;
padding: 0.1rem;
}
#carousel {
background: #9BFF00;
padding: 1rem;
}
#bcarousel {
background: #95D6ED;
}
.dac {
height: 240px;
margin-top: -2rem;
}
footer {
background: #C2C2C2;
}
<!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>Div carousel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Header</h1>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Navbar</h1>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="carousel">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Carousel</h1>
</div>
</div>
</div>
<div class="container" id="bcarousel">
<div class="row dac">
<div class="col-6 offset-md-3 mx-auto">
<h3 class="text-center headertext">Div below carousel</h3>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Footer</h1>
</div>
</div>
</div>
</footer>
</body>
</html>
I want to create an entry-page with four pictures as links to my other pages. But I want these pictures to be displayed in the middle (vertical and horizontal) of the monitor. I've tried quite a few things, but I cannot get it right. I can't even vertical-align the pictures on any way (for example bottom, as you'll see in the code).
Do you guys know a solution to this problem? Here my code:
HMTL:
<!DOCTYPE html>
<html>
<head>
<title>B-Music: Piano</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="piano.css">
</head>
<body>
<div id="tablecontainer">
<div id="tablerow">
<div id="Column1">
<div id="pianoleerkracht">
<a href="Prijs&Contact.html" title="Pianoleerkracht">
<img src="img/piano.jpg" alt="Pianoleerkracht">
</a>
</div>
<div id="jezelf">
<a href="Prijs&Contact.html" title="Jezelf">
<img src="img/piano.jpg" alt="Jezelf">
</a>
</div>
</div>
<div id="column2">
<div id="mij">
<a href="Prijs&Contact.html" title="Mij">
<img src="img/piano.jpg" alt="Mij">
</a>
</div>
<div id="prijs&Contact">
<a href="Prijs&Contact.html" title="Prijs en Contact">
<img src="img/piano.jpg" alt="Prijs en Contact">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
And the CSS:
body{
background-color: brown;
height: 100%;
}
#tablecontainer{
display: table;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#tablerow{
display: table-row;
height: 100%
}
#column1{
display: table-cell;
vertical-align: bottom;
}
#column2{
display: table-cell;
}
img{
width: 100px;
height: 100px;
}
Kind Regards
It seems as though the tablecontainer itself is being centered, however the content within the container has remained untouched by that css. Perhaps if you add the centering elements to the tablerow div it will correct the problem.
Here is what I would try:
#tablerow{
display: table-row;
margin-left: auto;
margin-right: auto;
height: 100%;
}
you don't need tables. css is enough:
#pianoleerkracht {
position: absolute;
left: 25%;
top: 25%;
margin-left: -50px;
margin-top: -50px;
}
i created a jsfiddle for you: http://jsfiddle.net/tomaspolach/Q89f3/
Solution:
I found a solution to the problem. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>
B-Music: Piano
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="piano.css">
</head>
<body>
<div id="Outer">
<div id="Middle1">
<div id="Inner1">
<div id="pianoleerkracht">
<a href="PrijsEnContact.html" title=
"Pianoleerkracht"><img src="img/piano.jpg" alt=
"Pianoleerkracht"></a>
</div>
<div id="jezelf">
<a href="PrijsEnContact.html" title="Jezelf"><img src=
"img/piano.jpg" alt="Jezelf"></a>
</div>
</div>
</div>
<div id="Middle2">
<div id="Inner2">
<div id="mij">
<a href="PrijsEnContact.html" title="Mij"><img src=
"img/piano.jpg" alt="Mij"></a>
</div>
<div id="prijsEnContact">
<a href="PrijsEnContact.html" title=
"Prijs en Contact"><img src="img/piano.jpg" alt=
"Prijs en Contact"></a>
</div>
</div>
</div>
</div>
</body>
</html>
And the CSS of course:
body{
background-color: brown;
height: 100%;
}
#Tablecontainer{
display: table;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#tablerow{
display: table-row;
height: 100%
}
#column1{
display: table-cell;
vertical-align: middle;
}
#column2{
display: table-cell;
}
img{
width: 100px;
height: 100px;
}
#Outer{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#Middle1{
display: table-cell;
vertical-align: middle;
}
#Middle2{
display: table-cell;
vertical-align: middle;
}
#Inner1{
float: right;
width: 120px;
}
#inner2{
float: left;
width: 120px;
}
Thank you guys for the inspiration!