This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
Below is the code I made for a simple html table. My goal is to center the entire table vertically in the center of the page based on the users height of the device. I tried to make a div with the height as 100% and width as 100% and placing the table 50% from top and left and no luck. Any ideas?
body {
background-color: #a00000;
}
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</body>
</html>
You can use flexbox to achieve the result you're looking for.
Set both the body & html to height: 100%;
Wrap the table with a wrapper div and use:
.wrapper {
display: flex;
height: 100%;
}
set the table margins to margin: auto;
This will ensure your table is always perfectly centered.
body, html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0; /* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
table {
margin: auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Try adding the following CSS rules to the table element:
table{
/* ... */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
display: table-cell; Add this on the parent div and then use vrtical-align on the table itself.
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
I believe you can do something like this to get yourself vertically centered on any given browser.
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
position: relative;
top: 50%;
transform: translateY(50%);
}
https://jsfiddle.net/rodhartzell/s6x5toj9/
Related
I have the following horizontal scrollbar, how to make it visible, without background, and add a padding-bottom so it's not touching the border?
I need it to be the same as in the photo above, with some space between the border and the actual scrollbar.
.container {
padding: 20px;
border-radius: 20px;
border: 1px solid #e1e1e1;
margin: 0px 60px 0px 60px;
overflow-x: auto;
position: relative;
}
::-webkit-scrollbar {
height: 5px;
width: 5px;
}
.container ::-webkit-scrollbar-track-piece {
background: white;
}
.container ::-webkit-scrollbar-thumb {
background: #f0f0f0;
border-radius: 8px;
}
.container ::-webkit-scrollbar-track-piece:end {
margin-right: 20px;
}
.container ::-webkit-scrollbar-track-piece:start {
margin-left: 20px;
}
<!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>Static Template</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="container">
<table>
<thead
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</thead>
</table>
</div>
</body>
</html>
You need to add some style to table and container
.container {
padding: 3px 20px;
border-radius: 20px;
border: 1px solid #e1e1e1;
margin: 0px;
position: relative;
overflow: hidden;
}
.container table {
overflow-x: auto;
display: block;
padding: 20px;
}
I want to keep different column with different width. I have tried to change it with multiple ways including changing width for specific td/th. But width attribute is not working in my code. Table div containsoverflow property as well. But I am unable to locate why I can't change the width using inline styling or using nth-child property. Please help me solving this issue.
<!DOCTYPE html>
<html>
<head>
<style>
.table-div
{
overflow-x:auto;
overflow-y:auto;
margin-bottom: 100px;
margin-top: 100px;
max-height: 300px;"
border: 2px blue;
}
.lesswidth
{
width: 500px;
}
.fixedwidth
{
width: 150px;
}
table {
/*table-layout: fixed;*/
/* width: 100%;*/
/* max-height: 100px;*/
/*border-collapse: collapse;*/
border-spacing: 0;
border: 1px solid red;
display: block;
/*margin-bottom: 100px;*/
}
th{
/*display: block;*/
border: 1px solid red;
position: sticky;
top:0;
text-align: left;
padding: 10px;
color:black;
width: 200px;
background-color: #f2f2f2;
}
td{
/*display: block;*/
border: 1px solid red;
/*text-align: left;*/
padding: 10px;
color:black;
background-color: #f2f2f2;
width: 200px;
/*margin: 100px 0px 75px 100px;*/
/*margin-right: 100px;*/
}
/*td:nth-child(2) { width: 100px !important; }
tr:nth-child(even){
background-color: red !important;*/
}
/*tr:nth-child(even){background-color: #f2f2f2}*/
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">
</head>
<body>
<div class="container">
<div class="table-div">
<table> <!-- class="tablecolor" -->
<tr>
<th class="fixedwidth">NUMBER</th>
<th>TYPE OF VACCINE</th>
<th>RELATED USECASE</th>
<th>DEVELOPER/RESEARCHER</th>
<th>CURRENT STAGE</th>
<th>FUNDING SOURCES</th>
<th>CLINICAL TRIALS</th>
<th>ANTICIPATED NEXT STEPS</th>
<th>PUBLISHED RESULTS</th>
<th>SOURCES</th>
</tr>
<tr >
<td width="500">1</td>
<td >DNA plasmid; INO-4800</td>
<td >Same platform as vaccine candidates for Lassa, Nipah, HIV, Filovirus, HPV, cancer indications, Zika, and Hepatitis B</td>
<td >Inovio Pharmaceuticals/Beijing Advaccine Biotechnology</td>
<td >Pre-clinical</td>
<td >Coalition for Epidemic Preparedness and Gates Foundation</td>
<td >N/A</td>
<td >Started Phase 1 April 2020; initial data expected late summer 2020</td>
<td >N/A</td>
<td >World Health Organization, MarketWatch, BioAegis Therapeutics, INOVIO</td>
<tr>
</table>
</div>
</div><!-- container -->
</body>
</html>
The right way to do this is:
<td style="min-width: 500px;">1</td>
I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
I am trying out a guide from YouTube, but I can't get the right_aside and left_aside elements to show on my screen. I have been looking for hours now, and I can't find the problem. Did I miss something?
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my websitebeta</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="indexStyle.css" />
</head>
<body>
<header id="main_header">
<div id="second_header"></div>
</header>
<menu id="main_menu"></menu>
<div id="main_wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="180">
<aside id="left_aside"></aside>
</td>
<td>
<section id="main_content"></section>
</td>
<td valign="top" width="180">
<aside id="right_aside"></aside>
</td>
</tr>
</table>
</div>
<footer id="main_footer"></footer>
</body>
</html>
This is my CSS:
*{
padding: 0px;
margin: 0px;
}
body{
color:#000;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background: #FFF;
}
#main_header{
width:100%;
height:100px;
background: #F90;
}
#second_header{
min-width:960px;
height:60px;
padding:20px;
margin:0px auto 0px;
}
#main_menu{
width: 100%;
height: 40px;
background: #09F;
}
#main_wrapper{
min-width:1000px;
margin-top: 0px;
margin-bottom: 0px;
}
#left_aside{
width: 180px;
min-height:700;
background: #9f0;
}
#main_content{
margin:0px 20px 0px;
min-height:700;
}
#right_aside{
width: 180px;
min-height:700;
background: #f00;
}
#main_footer{
width: 100%;
height: 50px;
background: #09F;
margin: 0px;
}
It looks like you've forgotten the px after your min-height in both the left and right asides.
It should look like: min-height:700px;
Good luck!
I have gotten my web page blocked out with CSS and here is the issue I am having, I want to just move the table of URL's to a more centered and lower position within the 'right' div tag. the colors are just for differentiation of field. ignore the img links.
This is the html code (for this assignment I am not allowed to use anything other than CSS and HTML. Below this code is the CSS file.
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Town of Oz Info</title>
<meta name="Zachary" content="Zachary Maltais" />
<link rel="stylesheet" type="text/css" href="oz.css" />
<!-- Date: 2012-09-05 -->
</head>
<body>
<!--Using a div based layout to position things on the page -->
<div id="header">
<!-- header code goes here -->
<h1 id="welcome">Welcome to Town of Oz</h1>
</div>
<div id="content">
<!-- All main content go here -->
</div>
<div id="right">
<!-- right side of screen code goes here -->
<!-- Table for navigation -->
<table id="navigation">
<tr>
<th><img src="images/arrow.gif"></th>
<th>Home</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Events</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Directions</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Weather</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Wizards</th>
</tr>
</table>
</div>
<div id="left">
<!-- left side of screen code goes here -->
</div>
<div id="footer">
<!-- footer code goes here-->
</div>
</body>
</html>
Here is the CSS:
body {
margin: 0px;
padding: 0px;
}
#page {
max-width: 950px;
max-height: 720px;
}
#header {
background: #ff9999;
position: absolute;
width: 950px;
height: 100px;
left: 0px;
top: 0px;
}
#content {
background: #9999ff;
position: absolute;
top: 100px;
left: 200px;
width: 750px;
height: 550px;
}
#right {
background: #ffff99;
position: absolute;
top: 100px;
height: 550px;
width: 200px;
margin: 0px;
padding: 0px;
}
#footer {
background: #99ff99;
position: absolute;
top: 650px;
width: 950px;
height: 70px;
}
#navigation {
position:absolute;
top:200;
left:50;
border:dotted;
border-color: black;
}
#welcome {
text-align: center;
color: blue;
font-style: oblique;
font-size: 250%;
font-family: "Perpetua";
font-weight: bold;
}
try this, i little changes to your ccs for the #navigation
#navigation {
border:dotted;
border-color: black;
margin: 0px auto;
position: relative;
top: 50px;
}
just change the top value if you want to put it down.
You could add this rule for the css
#right table{margin: 20px;}