HTML
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
...
CSS
.Fieldset
{
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend
{
border: medium none;
left: 40%;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
In Firefox legend gets aligned at center. But in Chrome it does not.
Add this CSS, remove margin :auto & left:40% then add margin-left:40%.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin-left: 40%;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
Simply delete left:40% from .Legend and text-align will do the rest.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
margin:auto; is doing all the work
text-align:center; does not do anything
left:40%; interferes with margin:auto;
Run this example:
fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
legend {
margin: auto;
padding: 0 10px;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset>
<legend>Long title long title long title long title </legend>
</fieldset>
This post is useful. However, I managed to align the legend to the center just with text-align:center as shown below.
legend {
text-align:center;
}
StackBlitz example for the same is here: https://stackblitz.com/edit/angular-nzmpzi
Related
I have a form module in html and the form looks good when it loads. However, if I click on the box to insert text, the box changes its css (different shape, different color et cetera). Also, When i stop typing and click elsewhere, the box gets back normal but the text I typed is not following the placeholder css.
Also, when I click "subscribe" after I typed the text(second screenshot). It first goes to that weird third screenshot and then I have to click again to actually submit.
MY CSS
form {
text-align: center;
}
label {
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
padding: 0;
}
button {
background-color: #B02E25;
border: 1px solid;
border-color: rgba(77,77,77,0.25);
border-radius: 10px;
height: 4px;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family:Georgia;
display: inline-flex;
align-items: center;
font-weight: lighter;
}
input {
box-shadow:0 0 5px 1px rgba(0,0,0,0.09);
margin-bottom: 20px;
border-radius: 10px;
border:0;
width:300px
}
input:focus {
padding: 10px;
font-size: 16px;
text-align: center;
font-family:Georgia;
box-shadow:0 0 5px 1px rgba(0,0,0,0.09);
}
::placeholder {
color: #aaa;
padding: 10px;
font-size: 16px;
text-align: center;
font-family:Georgia;
}
input:focus::placeholder {
color: transparent;
}
MY HTML
</head>
<body>
<div class="" style="position: relative; margin-top: 15em;">
<div class="col-12" style=" display: flex; justify-content: center; align-items: center;">
</div>
<div class="" style="display: flex;justify-content:center; align-items: center;">
<form method="post" novalidate>
<input type="hidden" name="csrfmiddlewaretoken" value="Xz4wZIixFDVotjFZqBZ6nIeT0jwX3QW7G9vOpjwPubdC6QI21KlAIisj5eYz48cb">
<tr><th></th><td><input type="email" name="email" class="" placeholder="Email you want to spam" maxlength="100" required id="id_email"></td></tr>
<br>
<button type="submit">subscribe</button>
</form>
</div>
</div>
</body>
fixed doing this
form {
text-align: center;
}
label {
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
padding: 0;
}
button {
background-color: #B02E25;
border: 1px solid;
border-color: rgba(77,77,77,0.25);
border-radius: 10px;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family:Georgia;
align-items: center;
font-weight: lighter;
font-size: 16px;
}
input {
box-shadow:0 0 5px 1px rgba(0,0,0,0.09);
margin-bottom: 20px;
border-radius: 10px;
padding: 10px;
border:0;
width:300px;
font-size:16px;
}
input:focus {
/*padding: 10px; */
text-align: center;
font-family:Georgia;
box-shadow:0 0 5px 1px rgba(0,0,0,0.09);
}
::placeholder {
color: #aaa;
padding: 10px;
font-size: 16px;
text-align: center;
font-family:Georgia;
}
input:focus::placeholder {
color: transparent;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Trying to put this on an imaged background. I've got it to semi-work but doesn't attach for some reason. Is it wrong to make it as 2 elements trying to connect them? Is there a way to make it one element, or a better way to do it?
Here's what it is now:
http://codepen.io/anon/pen/MJJJog
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.header__ribbon__point {
margin: 0;
width: 0;
height: 0;
border-top: 35px solid #ad0304;
;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;
;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
font-size: 16px;
}
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
<div class="header__ribbon__point"></div>
</div>
There's a space between the 2 header DIV's. You can set font-size:0 in your wrapper class.
It's better to use psuedo elements, before and after IMO. Here's a fiddle for you.
https://css-tricks.com/pseudo-element-roundup/
https://jsfiddle.net/vvupo6ha/1/
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
</div>
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.header__ribbon:before,
.header__ribbon:after {
position: absolute;
content: '';
top:0;
border-top: 35px solid #ad0304;
border-bottom: 35px solid #ad0304;
}
.header__ribbon:after {
right: -35px;
border-right: 35px solid transparent;
border-left: 10px solid #ad0304;
}
.header__ribbon:before {
left:-35px;
top:0;
border-right: 10px solid #ad0304;
border-left: 35px solid transparent;
}
You've styled .header__ribbon and .header__ribbon__point as inline-blocks, so inline rules apply: you have to remove all spaces between them.
I would use flexbox on the .wrapper
.wrapper{
text-align:center;
display: flex;
justify-content: center
}
p{
font-family:arial;
font-weight:normal;
margin:0;
padding:0;
text-align:left;
}
.header__ribbon{
padding: 10px 20px;
background-color: #ad0304;
color:#fff;
width:70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display:inline-block;
vertical-align: middle;
}
.header__ribbon__point{
margin:0;
width: 0;
height:0;
border-top:35px solid #ad0304;;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
font-size: 16px;
}
http://codepen.io/anon/pen/xgggjq
* {
margin: 0;
padding: 0;
}
.box {
width: 230px;
border: 1px solid red;
}
input {
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span {
padding: 0 2px;
cursor: pointer;
line-height: 20px;
font-size: 14px;
display: inline-block;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
I want to know why there is 1px space between bottom of span and bottom of outdiv? can someone help me out?
You need to set vertical-align:top for the display: inline-block span tag
*{
margin: 0;
padding: 0;
}
.box{
width: 230px;
border:1px solid red;
}
input{
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span{
padding: 0 2px;
cursor: pointer;
line-height:20px;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
By default, a span element is an inline level element, which respects the whitespace in the markup. Thats the reason a small space between the input and span. Thanks..
How to make this effect (cross-browsed) without using float: left?
I need to center this form so float attribute is wrong for me. Anybody can help?
I've made code as you can see below.
My code:
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
Because you want it cross-browser and without using float:left, you can use inline-block with vertical-align:top
And to center, you need to apply margin:0 auto to footer with some width instead
I made a few tweaks to your code.
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0;
/* demo */
background: lightgreen
}
footer {
/*fix inlin block gap */
font-size: 0;
margin: 0 auto;
width: 265px; /* 230px + 35px */
}
footer input {
line-height: 18px;
height: 35px;
display: inline-block;
vertical-align: top;
}
footer input[type=text] {
border: solid #efefef;
border-width: 1px 0 1px 1px;
width: 230px;
padding: 0 10px;
font-size: 16px;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
color: #fff;
width: 35px;
font-size: 18px;
cursor: pointer
}
<footer>
<input type="text">
<input type="submit">
</footer>
Your code without float:left actually works fine. Maybe you experience the line break on small sized screens. If it is the case, just add a piece of CSS for your footer like this example.
footer {
white-space: nowrap;
text-align: center;
}
footer input[type=text] {
border: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
<footer>
<input type="text" />
<input type="submit" />
</footer>
Use like this
<style>
body{margin:0;}
footer{
width:100%;
background:#ccc;
height:250px;
}
.form{
width:292px;
margin:0 auto;
}
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 37px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
</style>
<footer>
<div class="form">
<input type="text">
<input type="submit" value=">">
</div>
</footer>
I want to style a <button> and <a> element both into the same format. I use the following code:
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
But the <button> element seems to ignore the height and my <a> element does not touch the edge of the black dummy <div> above:
You can test the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/
Try this:-
button, a {
background-color: white;
border: medium none;
box-shadow: 0 0 1px #000 inset;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
vertical-align: top;
}
Or:-
button, a {
background-color: white;
border: medium none;
vertical-align:top;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
border:1px solid #000;
box-sizing:border-box
}
DEMO2
DEMO
Apparently the default box-sizing method for button is border-box while that for inline-block is content-box. So:
35px height means the <a> is actually 37px tall (border adds 2px)
35px height means the <button> tag is 35px tall (35px includes the border)
Set the box-sizing: border-box on both elements.
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
box-sizing: border-box;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
try adding vertical-align: bottom to button, a selector
button, a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
vertical-align: top;
}
#dummy-block
{
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>Okay</button>
<a>Edit</a>
a
{
padding:1px 15px;
}
button,a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
button
{
padding: 0 15px;
}