Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have attached the HTML and CSS I have so far but I am new to front end so I'm not sure what the best approach is.
I just want each text element to be aligned with the respective numbers underneath them.
h1 {
font-family: 'Biryani', sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 50px;
}
ul {
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
ul:before {
content: '';
display: block;
margin-top: 0em;
}
li1 {
font-family: 'Biryani', sans-serif;
font-size: 14px;
font-weight: light;
color: #929292;
display: inline-block;
margin-left: 10em;
margin-right: 13em;
position: relative;
top: 1.25em;
}
li2 {
font-family: 'Biryani', sans-serif;
font-size: 16px;
font-weight: light;
color: #929292;
display: inline-block;
margin-left: 10em;
margin-right: 13em;
position: relative;
top: 1.25em;
}
<!DOCTYPE HTML>
<html>
<head>
<title> REALSURF</title>
<link rel="stylesheet" type="text/css" href="realsurfcss.css">
<link href="https://fonts.googleapis.com/css?family=Biryani:300,400,800" rel="stylesheet">
</head>
<body>
<h1>
REALSURF
</h1>
<ul>
<li1>Wind</li1>
<li1>Wave Height</li1>
<li1>Tide</li1>
</ul>
<ul>
<li2>6</li2>
<li2>3-4</li2>
<li2>1.8^</li2>
</ul>
</body>
</html>
Simply, wrap each columns of elements in the same block and set it's property text-align to center in CSS.
Here is an approach using CSS's flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
.container {
display: flex;
width: 100%;
}
.column {
text-align: center;
flex-grow: 1;
}
<div class="container">
<div class="column">Text<br />Number</div>
<div class="column">Text<br />Number</div>
<div class="column">Text<br />Number</div>
</div>
You can also do that with tables, take a look:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>Text<br/>Number</td>
<td>Text<br/>Number</td>
<td>Text<br/>Number</td>
</tr>
</table>
You asked about styling of each rows, all you need to do is wrap each row in each element like below:
.container {
display: flex;
width: 100%;
}
.column {
text-align: center;
flex-grow: 1;
}
.text {
font-weight: bold;
font-family: Helvetica;
color: red;
}
.number {
font-size: 18px;
margin-top: 16px;
color: green;
}
<div class="container">
<div class="column">
<div class="text">Text</div>
<div class="number">Number</div>
</div>
<div class="column">
<div class="text">Text</div>
<div class="number">Number</div>
</div>
<div class="column">
<div class="text">Text</div>
<div class="number">Number</div>
</div>
</div>
Easiest with Ruby annotations, but it'll only work in more modern browsers:
body {
font-size: 30px;
}
<ruby>
5<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>
<ruby>
1-2<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>
<ruby>
8<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>
using pseudo element after JSFiddle
li{
display: inline-block;
padding: 0 20px;
font-size: 50px;
position: relative;
line-height: 90px;
}
li:before{
content: 'text';
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
font-size: 12px;
line-height: 12px;
text-align: center;
}
Related
I'm making this site and working on second page. However, I have trouble for centering component in the whole viewport. I searched lots of solutions including position, display:table, etc. But, I couldn't know how to use for this situation.
.header {
background-color: #F7F7F7;
padding: 15px;
}
.header h1 {
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
float: right;
}
.header__nav li {
float: left;
display: flex;
align-items: center;
height: 38px;
}
.header__nav li a {
margin-right: 39px;
display: inline-block;
font-size: 20px;
font-weight: bold;
transition: all 0.5s;
}
.header__nav li a::after {
content: '';
width: 0;
height: 2px;
background-color: black;
transition: 0.3s;
display: block;
}
.header__nav li a:hover::after {
width: 100%;
}
.header__nav li button:hover::before {
width: 100%;
}
.contents {
padding: 150px 100px;
}
.contents__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.contents__inside strong {
font-style: italic;
font-size: 1rem;
}
.contents__inside h2 {
margin-bottom: 10px;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}
.contents__inside img {
width: 100%;
}
.contents__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto;
}
.info__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.info__inside h2 {
margin-bottom: 30px;
font-size: 4rem;
font-weight: bold;
line-height: 1;
}
.info__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto 100px;
}
.info__inside img {
width: 100%;
}
.footer {
background-color: blue;
}
<header class="header clearfix">
<div class="l-wrapper">
<h1><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</div>
</header>
<section class="contents">
<div class="l-main">
<div class="contents__inside">
<strong>Top quality</strong>
<h2>ICONS</h2>
<p>6,500 unique icons in different categories.
Drawn by hand and designed for perfection.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
</div>
</div>
</section>
<section class="info">
<div class="l-main">
<div class="info__inside">
<h2>Thousands of icons</h2>
<p>6,500 unique icons in 3 style color, line and solid.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
</div>
</div>
</section>
<footer class="footer">
</footer>
Is there an any proper method to solve this issue? How can I implement like original design of website?
EDIT
I don't wanna solve by using CSS3 property to practice CSS2
IMAGE that I wanna fix
If i understand you, You want to center your items in your div
To do that you can
.yourDivClassName{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
<body>
<div class="yourDivClassName">
<button>example button</button>
<p>example text</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU" alt="example image">
</div>
</body>
Am trying to do the same as the photo shows but I don't really know how to do that
So I should be able to have that line with any fontawesome icon in the middle.
Here my initial markup:
<h1>Welcome</h1>
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
}
h1:after {
content: '\f209';
font-family: FontAwesome;
display: block;
}
Here my fiddle
Hope you can help.
By giving your h1 a border-bottom and positioning your :after icon absolute in the center inside it. Also apply a white background to make sure the line gets interrupted.
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
h1:after {
content: '\f209';
position: absolute;
font-family: FontAwesome;
background-color: #FFF;
display: block;
margin-left: 50px;
}
Update fiddle
Well... the accepted answer works fine, but it involves set widths, and will need to be rewritten to cater for longer text in the heading. The following works regardless of width of text (it does, however, involve a little bit more HTML):
https://jsfiddle.net/jx4dv11g/3/
h1 {
font-size: 25pt;
margin: 0 auto;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
display: inline-block;
}
.headericon {
display: inline-block;
position: absolute;
}
.headericon i {
display: block;
margin-top: -25%;
background: white;
transform: translate(-50%,0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>
I'll suggest you to use following HTML structure for this:
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
Apply a class on h1 and use pseudo elements :before and :after to draw lines around icon.
This will allow you to have one time generic styling for all similar places in your web page. If you wants to use different icon in some other heading then all you need is just change the font awesome icon in that header.
body {
text-align: center;
margin: 0;
}
.styled-heading {
text-align: center;
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
position: relative;
overflow: hidden;
}
.styled-heading .fa {
display: block;
margin: 0 auto;
}
.styled-heading:before,
.styled-heading:after {
position: absolute;
background: black;
margin-left: 30px;
width: 999px;
height: 1px;
content: '';
bottom: 12px;
left: 50%;
}
.styled-heading:after {
margin-right: 30px;
margin-left: 0;
right: 50%;
left: auto;
}
.orange {
background: orange;
}
.green {
background: green;
}
.blue {
background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
<div class="orange">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-home"></span>
</h1>
</div>
<div class="blue">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-globe"></span>
</h1>
</div>
<div class="green">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-power-off"></span>
</h1>
</div>
I am by no means a web developer, I am more on the infrastructure side of things. Anyway, I built a FreeBSD server with an AMP stack on an XServe G4 and wanted to spruce up the generic landing page that only printed "It Works!" on a plain white screen to something a bit more interesting when I ran into a an issue with CSS.
Here's the page - it works exactly the way it's supposed to on Chrome, Opera, Safari on both Mac and Win10 (I didn't check Safari on Win10)
On Microsoft Edge, I get this:
What do I need to do in my CSS so that I can correctly position that element?
The code for the page is below
<html>
<head>
<style>
body {
background-image: url("splash.png");
background-repeat: no-repeat;
background-position: center;
background-color: #BEBEBE;
font-family: "Arial", "Verdana", "serif";
justify-content: center;
}
#container { display: block; position: relative;
width: 60%;
top: 60%;
font-weight: bold;
margin: auto;
}
#pretext { display: inline-block; color: #b80000; font-size: 3em;
}
#posttext { display: inline-block;
color: #FFFFFF; font-size: 3.5em;
font-weight: 1500; }
#logo {
height: 50px;
position: absolute;
bottom: 1%;
right: 1%;
padding-bottom: 5px;
}
#logo img { height: inherit; vertical-align: top; }
#svr-info { font-size: .75em;
color: #dae6f7;
width: auto;
position: absolute;
bottom: 0px;
right: 10px;
padding-top: 5px;
}
#phpinfo a { font-size: .75em;
text-decoration: none;
}
a:hover { font-size: 1.3em; }
</style>
</head>
<body>
<div id="container">
<div id="pretext">Think</div>
<div id="posttext">Correctly.</div>
</div>
<div id="logo">
<img src="powerpc-logo.png" />
<img src="apple-logo.png" />
</div> <br>
<div id="svr-info">
<?php
echo $_SERVER['SERVER_SOFTWARE'];
echo "---";
echo php_uname('r');
echo " ";
echo php_uname('m');
?>
</div>
<div id="phpinfo">
PHPINFO Page
</div>
</body>
</html>`
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
body {
margin: 0px;
padding: 0px;
}
.container {
height: 100vh;
}
.text1 {
display: inline-block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" >
<div style="display: table; margin: 0 auto; text-align: center; position: relative; top: 30%;">
<img src="logo.png" style="width: 100px; height: 100px;"/>
<br/>
<h1 class="text1">Think Correctly</h1>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<img src="logo2.png"/><span>Logo 2</span>
</div>
</div>
</body>
</html>
try to make it using this code
you can read this about using tables vs using divs with display table
divs vs tables
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>