I want to the two span center in the div but i'm failed,how to fix it? Code as below don't effective but when i put a div out of the two span it become effective while display property change to inline-block, how could this happen?
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
float: left;
border: 1px solid red;
}
.inner2{
float: left;
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You have float: left in your inner1 and inner2 classes and they move the spans into left. Just removing them works fine. Below is the updated code.
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
border: 1px solid red;
}
.inner2{
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You can't center it because of float: left; on both spans. Just remove the float: left; and it will go to center.
You say it works when you wrap the spans inside a div with display inline-block. That is because that div will go to center since it doesn't have float: left, and then the spans will float: left inside the centered div. Hope you got it :)
Another approach could be just using the flexbox model. It's easier and code is short too.
body {
margin: 0;
padding: 0;
}
.topbar {
border: 1px solid;
max-width: 800px;
height: 20px;
display: flex;
justify-content: center;
}
.topbar span {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
PS: Also to make the code shorter, instead of using inner1 and inner2, I used .topbar span in css since both share the same property.
Related
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 3 years ago.
I just want to make my button expands full width to its container with some margin to itself, but it's not working. I have tried box-sizing: border-box, but as you can see in the snippet, still no luck because notice the right-side of the button, it's like overshoot..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
}
.block {
margin: 10px;
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
That is because when the width is already 100%. Adding 10px margin to the left will cause it to be 100% + 10px, therefore overshoots the width of the container. Alternatively, you can add 10px padding to the container instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
padding: 10px; /*Added Padding*/
}
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Please remove the following commented CSS and it will work absolutely fine,
* {
box-sizing: border-box;
}
.cont {
/* width: 100vw; */
background-color: white;
width: 100%;
}
.block {
/* margin: 10px; */
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
I have HTML and CSS code like this:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
CSS:
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width:80%;
text-align:left;
}
span.alignright {
float: left;
width:20%;
text-align:right;
}
On a large window/viewport, this produces text in a two-column layout like this (which is what I want):
On a smaller window/viewport, e.g. a mobile browser, this produces text like this:
There isn't a lot of text here, so I'd like the font to scale according to the viewport instead of wrapping, as much as possible (and this should be possible on most viewports because, again, there isn't a lot of text here).
However, if I add font-size:2vw elements to the CSS, e.g.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width: 80%;
text-align: left;
font-size: 8vw;
}
span.alignright {
float: left;
width: 20%;
text-align: right;
font-size: 2vw;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
This kills the two-column layout and the rest of the formatting. How do I fix this?
You can use the fw unit for font-size as you did, but you simply have to use smaller values. Start with font-size: 0.5vw and change the value slowly trying different values to get the desired result.
Keep in mind: One vw is one percent of the screen width, so for a 1000px wide screen, 8vw means 80px fontsize!
You can add your desired font-size:2vw to scale with viewport along with a couple of other rules:
Setting the wrapper and spans to render as table and cells
Setting white-space on the spans to nowrap
This seems to do what you want but renders a bit odd on a large viewport. An improved approach would probably be to use at least one media query and to set the dynamic font size only on smaller screens.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
display: table;
width: 100%;
box-sizing: border-box;
}
#main>div.row {
display: table-row;
}
span.alignleft {
text-align: left;
}
span.alignright {
text-align: right;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
padding: 0 5px;
}
#media only screen and (max-width: 768px) {
#main {
padding: .5em;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
font-size: calc(6px + 1.5vw);
}
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</div>
</body>
</html>
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
I'm looking to align my logo with my header title and subtitle.
I've attempted to do this using display: inline-block. I didn't manage to,
and I also attempted with floats, but everything messed up.
I've then put a hr (line) under the header, but it's too thin, so I want to add thickness to it, but I can't manage to.
I've looked up this question but couldn't use answers to help me as most of them used tables.
How can do this?
http://codepen.io/anon/pen/BjmMdM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<main>
<header>
<img class="logo" src="hidden.jpg" alt="Logo">
<div id="title">
<h1>Lorem Epsum</h1>
<h3>Front Ninja</h3>
</div>
</header>
<hr id="line">
<section>
</section>
</main>
</body>
</html>
File style.css
html, body {
padding: 0;
margin: 20px;
height: 100%;
font-family: 'Quicksand', sans-serif;
}
header {
padding: 25px;
background-color: whitesmoke;
display: inline-block;
}
.logo {
height: 80px;
width: 80px;
margin-left: 300px;
border: #F8981C solid 5px;
border-radius: 99px;
}
#title {
text-transform: uppercase;
}
#line {
height: 100px;
background-color: blanchedalmond;
border: none;
}
So. I think the issue is that you needed vertical alignments. You have all of the html markup you need. I made a jsFiddle to help you out. Let me know if this is what you're looking for. There are a couple of ways to position the elements; I just added hard left margins to achieve the effect in your wireframe.
Fiddle: https://jsfiddle.net/legendarylionwebdesign/b570pyo9/
hr {
border: 0px;
height: 2px;
width: 100%;
background: black;
}
.logo {
display: inline-block;
height: 100px;
width: 100px;
vertical-align: middle;
margin-left: 100px;
}
#title {
width: 200px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 200px;
}
For the title, you can just change it like this:
#title {
margin-right: 300px;
text-transform: uppercase;
z-index: 100;
position: absolute;
right: 0;
top: 20px;
}
And play with top or put width and so on example.
So, while I tried positioning some text on the right of an image, I got this very weird error:
Positioning worked when I used as an article description a few characters.
So, that's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="somelogo.png">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Title - Home</title>
</head>
<body>
<section id="mainContent">
<div class="article_summary">
<span class="article_date_author">2013-11-08 20:31:32 by MY NAME</span>
<span class="article_title">ARTICLE TITLE HERE</span>
<div class="article_clear"></div>
<div class="article_image_container">
<img class="article_image" src="http://i.imgur.com/Nl8SwBp.jpg">
</div>
<div class="article_descr">
<p>
Article Summary
Read more...
</p>
</div>
</div>
</section>
</body>
</html>
main.css:
#import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
* {
font-family: "Ubuntu";
}
.article_summary {
overflow: hidden;
background-color: white;
border-radius: 10px;
margin: 10px;
box-shadow: 2px 2px 10px 1px #777;
}
.article_date_author {
font-size: 0.7em;
float: right;
padding: 10px 10px 0 0;
}
.article_clear {
clear: both;
}
.article_image_container {
position: relative;
float: left;
}
.article_image {
float: left;
padding-top: 10px;
width: auto;
max-height: 300px;
max-width: 100%;
}
.article_descr {
position: relative;
float: left;
}
If I change "Article Summary" to something longer the text will result beneath of the image.
Images:
I came to the realization that this has to do with the fact that it can't stand more than 1 line of text on the right of the image. But why is this happening ?
Text takes all the space it needs. If you want it to stay on the right you need to give the descr div a width
.article_descr {
position: relative;
float: left;
width: 70%;
}
Give your a maximum width so that the image width + the width won't be more than the containers 100%:
.article_descr {
position: relative;
float: left;
max-width: 60%;
}
http://www.liveweave.com/e7uYIh