I've got the following code:
<center><div class="body">
<span style="margin-left:5px;text-align:left;">A text</span>
</div></center>
The text-align:left; isn't working. I've also tried margin: 0px auto; and that also didn't work.
Please help me...
Apply display: block on span
.body span{margin-left:5px;text-align:left; display: block;}
<center><div class="body">
<span>A text</span>
</div></center>
Please try following code:
<center>
<div class="body">
<div style="margin-left: 5px; text-align: left;">A text</div>
</div>
</center>
However <center> tag is deprecated in HTML5 bcz it is related with alignment of content for which its better to use CSS..
A better approach is as follows:
<div class="body">
<span>A text</span>
</div>
.body {
text-align: center;
}
.body span {
text-align: left;
margin-left: 5px;
display: block;
}
I would not use a SPAN in this case, I would use a DIV or a P. A SPAN element is not for showing lots of content and you can not put other block elements inside the SPAN otherwise it won't validate. I only say that because I misused the SPAN element for years by myself ;).
Related
I just have started with HTML and just basically trying around. So I have found some (Quite alot) stackoverflow where people are wondering the same and I just found out that alot of people using inline and my thought was if there is a way to maybe do it without a inline and I haven't come to any answers and here iam!
I have tried to do so far:
.right {
float: right;
}
<header>
<h1>Left Text</h1>
<span class="right">Right Text</span>
</header>
and it ends up pretty bad I would say
Picture of how it looks like
Anyone has any idea?
<h1> tag in HTML is display: BLOCK element by default, So it comes with a new line always. If you want <span> tag to be displayed on the same line just change the <h1> tag display to inline.
<h1 style="display: inline;"> Left Text </h1>
I think this is what you are looking for.
<h1>Left Text
<span style="float:right">Right Text</span>
</h1>
* {
margin: 0;
padding: 0;
}
header {
display: flex;
align-items: center;
}
.left {
float: left;
margin-right: 20px;
}
.Right {
float: right;
}
<header>
<h1 class="left">Left Text </h1>
<span class="Right">Right Text</span>
</header>
So I was trying achieve this logo but the text wont go in middle.
I have tried vertical align and line-height but no luck. Hope someone helps :)
Code:
<div>
<div id="logo">
<div id=""></div>
<p>title<br>
text</p>
</div>
<div id="">
</div>
</div>
CSS
#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
try this css on the container element
display: flex;
align-items: center;
justify-content: center;
If you're using html and css, just make sure that both the text and the image are in the same div.
You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/
Hope this works .
simple example
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span >verticle text.</span>
</div>
There are a few methods.
One of them is:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Try with text:
transform: translate(12px, 76px); //adjust it to fit your needs
Well flexbox is the easiest way to go around
<div id='foo'>
<div id='logo'><img src='path.png'></div>
<div id='text'>Title HEre</div>
</div>
CSS:
#foo {
display:flex;
align-items:center;
}
So this is probably an easy answer, but my image which is supposed to be sitting in the middle of the page is slightly off and it's irritating me a lot.
HTML:
</section>
<section class="img_section">
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
CSS:
img section{
float:center;
text-align:center;
}
I've tried removing float, and taking it out of a section entirely, but it won't budge.
Any help would be amazing
there's no such thing as float: center;
also img section doesn't style image within section.
you could try either:
1:
img {
display: block;
margin: 0 auto;
}
2:
section div {
text-align: center;
}
section div img {
display: inline-block;
}
depending on your other styles
This is simple to answer.
#div1 {
text-align: center;
}
</section>
<section class="img_section">
<div id="div1">
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
The text-align: center; property is going to make all the elements inside the div centered. Also, it is better if you select the div with a specific class or ID. This is going to go on all div elements on the page.
this is much more simple. just include center tag as
<center>
<section>
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
</center>
try in css:
.img_section img{
text-align:center;
}
html:
<section class="img_section">
<img src="images/menu.jpg" alt="menu" align="center">
</section>
I like to use
margin: 0 auto;
for centering
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>