I have a basic website and I'm stylizing html with css. I put two paragraphs next to each other and they appear on the same line, although separately as two centered pieces.
For example:
<p>ugh</p>
<p>yay</p>
would show up in the website like
ugh yay
instead of
ugh
yay
The CSS I have for the paragraphs are:
p {
text-align: center;
color: black;
display: block;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
NOTE TO EVERYONE: REMOVING INLINE-BLOCK DID NOT FIX IT
FULL CODE CSS: https://jsfiddle.net/sprot9uh/
p {
background: yellowgreen;
text-align: center;
color: black;
display: block;
font-size: 20px;
margin-top: 0;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.inline {
display: inline-block;
margin-right: 20px;
background: yellow;
}
<p class="inline">I'm an inline block element....
</p>
<p class="inline"> me too
</p>
<p> But I'm a block level element
</p>
<p>Me too
</p>
remove inline-block for p
p {
text-align: center;
color: black;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
That's what the inline-block does in your css. You can either completely remove it or just use block.
add display:block in (p) tag instead of display:inline-block; and u can remove display-inline-block it's also worked...
<p> elements are display: block; by default. Usually all you need is:
p {
margin-bottom: 10px;
font-size: 20px;
color: black;
}
The default display property of p tag is 'block' so you can remove the display property.
You can refer the jsfiddle link
p {
text-align: center;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
Looking into your css code I think you have paragraphs <P></P> in <section></section> something like:
<section>
<p>123</p>
<p>456</p>
</section>
You have to change css for section (flex-direction from row to column):
section {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: column;
}
Related
Fiddle here: https://jsfiddle.net/sgbotsford/d52zyp0t/72/
Where does the extra first line indent come from in the <li> using => :before content?
Here's the problem. Circumstances beyond my control put paragraph tags inside list elements. When I use a :before, with a negative left, it works -- it sits out in the margin just like I want. But the text-indent is increased where I've used the :before. Where does this extra indent come from?
The desired behaviour is to have paragraphs and list items to be styled identically, except for the => floating off the left margin.
I'm sure I can eventually experiment enough to hack a solution, but right now I am trying to understand this behaviour in terms of the box model.
One answer suggested removing the text-indent tag from <p> This results in a flush <p> and a smaller indent on <li>
HTML
<html>
<head>
</head>
<body>
<div class=content>
<p>This is a paragraph. It has several sentences. It goes on and on and on and on. It has several sentences. It goes on and on and on and on. </p>
<ul class="c">
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</p></li>
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</p></li>
</ul>
<ul class="b">
<li><p>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </p></li>
<li><p>This is a list element that is long enough to wrap, I think.</p></li>
</ul>
</div>
</body>
</html>
CSS
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-indent: 1rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -2.5rem;
}
Hi Can you please check it's really helpfull for you I just Remove p
tag text-indent and change ul.b li p::before left position Add
text-indent in ul.b li p element
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
padding: 5px;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -10px;
}
ul.b li p {
text-indent: -22px;
}
.bluetable {
background-color: #9FF;
border: 2px solid black;
}
td {
margin: 14rem;
border: 1px dashed green;
}
Thank you all for your time.
I am trying to do something simple but it turns out to be so complicated.
I need a link to send an email but there's some issue with the style. It shows the content fractured (see jsfiddle). But when I right click several times, everything is back to normal. Any idea?
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
}
#sendAll:hover {
background-color: #0164c6;
}
HTML:
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Here's the jsfiddle link
Thank you all !
Just provide display: block to #sendAll
The <b> tag provides a font-weight: bold property to the element, but the element is not a block level element by itself. So, you have to manually specify the same.
Refer code:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: block;
}
#sendAll:hover {
background-color: #0164c6;
}
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Try this:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
white-space:nowrap;
}
#sendAll:hover {
background-color: #0164c6;
}
Explain
Add a property white-space:nowrap in #sendAll id
update code link
if you want your text on only one line, add the following to your #sendAll class
white-space: nowrap;
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?