Here i upload the picture, i want to put my image to the left side of Food and Travel text
.block-title h3 {
color: #151515;
font-family: 'Montserrat', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.9px;
margin-bottom: 24px;
margin-top: 50px;
padding-bottom: 13px;
position: relative;
text-align: center;
}
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
You just need to add that line of CSS
div.block-title { display: inline-block; }
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
I would change your HTML a little bit:
<div class="col-lg-12">
<div class="block-title">
<img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
<h3 class="title">Food & Travel</h3>
</div>
</div>
Some observations about your HTML:
Since the creation of CSS, it is considered a bad practice to use styling elements inside HTML, like center. HTML should hold only content and CSS styles. center in HTML can be, in most cases, easily replaced by text-align: center in CSS;
Avoid giving styles to a tag (as you did with H3). It is always better to give a class for each individual element you want to style. For example, you can give a class to your image and to your header, as I did on the example above.
Float, as mentioned by some users here, is barely a good option. I would not recommend it.
I'd go for using Flexbox on the container (block-title). It is the better option and the most accurate.
Your container would be something like
.block-title {
display: flex;
justify-content: center;
align-items: center;
}
... and the magic is done!
Here is an example using flexbox:
https://codepen.io/annabranco/pen/mzEXGv
Another option if you are not comfortable with using Flebox yet, it's to give the H3 a display: inline. By default, all header force a line break (they have display: block). If you change it to display: inline you force the other elements to be displayed in the same line as your header.
In this case you would need to play around with vertical-align to find the exact spot where your text would be centered to the image.
.title {
display: inline;
(..)
}
.image {
vertical-align: -25px; //negative values go up and positive down.
}
Here is an another example, using inline:
https://codepen.io/annabranco/pen/yRJvQa
Related
I need help getting my H1s to align. My code is below. An image of it is also below. I would like for the Spencer Hiltbrand bit at the top to be all the way to the right. The Beautiful Websites, Inspiring Photography part the same it is now. I am using Bootstrap.
Homepage:
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right !important;
}
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</div>
</div>
</section>
The following line of HTMl you have is invalid:
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
You're starting with an h1 tag but never closing it because you try to close it with an h4 tag. This may be causing part of your issue if styles aren't working.
To answer your actual question, an easy way to get your top brand/text to the right is simply to use float: right instead of text-align: right.
If you need to align the heading all to the right, then you need to get rid of container, row and col-lg-12 because they introduce padding and margins. The heading's margin-top has been changed little from the top. Please have a look at the HTML, CSS and its working demo.
HTML
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div>
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h1>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</section>
CSS
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right;
margin: 5px 0 0 0;
}
Still if you have to make use of bootstrap's container, row and col-*, then you need to modify the existing html.
So I have this HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6"> <span class="currency-symbol">$</span><span class="price">44</span>
</div>
<div class="col-xs-6">
<p>/ month</p>
<p>Here are some really interesting things about the product.</p>
</div>
</div>
</div>
</div>
and then this CSS
.container {
width: 333px;
margin: 0 auto;
}
.currency-symbol {
vertical-align: top;
font-size: 33px;
}
.price {
font-size: 88px;
vertical-align: top; /* doesn't work */
}
The '$' symbol aligns to the top as does the text in the RH column. But the price amount doesn't.
How do I vertically align the '$' symbol, the '44' amount and the text in the RH column so that they're all in line?
JSFiddle here: http://jsfiddle.net/magician11/4k19w0fs/3/
Thanks.
you can try line-height on your price class
.price {
font-size: 88px;
line-height: 80px;
}
It actually does work, just it doesn't look like it.
Highlight the "44" and you'll see the highlight extends quite a way beyond the top of the digits. The only real way to do this is going to be fine-tuning the line-heights, or margin-tops of each element.
.price {
line-height:77px;
}
That seems pretty close to me. Note that other fonts (or even other digits) might be different.
try to edit price class like this?
.price {
font-size: 88px;
vertical-align: top;
position: relative;
left:5px;
top:-22px;
}
I am not entirely sure what you are asking for though... maybe this is what you need
Just make the line-height: 1; on the .price span to give it the same alignment as space-height.
.price {
font-size: 88px;
line-height: 1;
}
This aligns each of the elements. However, I also recommend looking-up vertical rhythm and how to get textual elements to maintain the same vertical space.
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here
I want to have two headings h2 and h3 on the same horizontal rule one on the left and the other on the right. They have a HR underneath them and I want them to be at the same distance from this HR.
I tried making them both inline and have one float right and the other left. The problem with doing so was with h3 as it is smaller than h2 vertically it was centered at half the h2's length.
h2 was kinda like sitting on the hr and h3 kinda looked like floating in mid air.
I kinda wanted them to be like both sitting on the hr.
h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}
I was talking about visually describing the situation.
You'd need to wrap the two headings in a div tag, and have that div tag use a style that does clear: both. e.g:
<div style="clear: both">
<h2 style="float: left">Heading 1</h2>
<h3 style="float: right">Heading 2</h3>
</div>
<hr />
Having the hr after the div tag will ensure that it is pushed beneath both headers.
Or something very similar to that. Hope this helps.
You should only need to do one of:
Make them both inline (or inline-block)
Set them to float left or right
You should be able to adjust the height, padding, or margin properties of the smaller heading to compensate for its positioning. I recommend setting both headings to have the same height.
See this live jsFiddle for an example.
(code of the jsFiddle):
CSS
h2 {
font-size: 50px;
}
h3 {
font-size: 30px;
}
h2, h3 {
width: 50%;
height: 60px;
margin: 0;
padding: 0;
display: inline;
}
HTML
<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />
Display property 'inline-block' will place both headers next to each other. You can run this code snippet to see it
<h1 style="display: inline-block" >Text 1</h1>
<h1 style="display: inline-block" >Text 2</h1>
The Css vertical-align property should help you out here:
vertical-align: bottom;
is what you need for your smaller header :)
Vertical-Align
Check my sample solution
<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>
This will divide your page into two and insert the two header elements to the right and left part equally.
The following code will allow you to have two headings on the same line, the first left-aligned and the second right-aligned, and has the added advantage of keeping both headings on the same baseline.
The HTML Part:
<h1 class="text-left-right">
<span class="left-text">Heading Goes Here</span>
<span class="byline">Byline here</span>
</h1>
And the CSS:
.text-left-right {
text-align: right;
position: relative;
}
.left-text {
left: 0;
position: absolute;
}
.byline {
font-size: 16px;
color: rgba(140, 140, 140, 1);
}
Add a span with the style="float: right" element inside the h1 element. So you can add a "goto top of the page" link, with a unicode arrow link button.
<h1 id="myAnchor">Headline Text
<span style="float: right">↥</span>
</h1>
I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:
I have tried below code, but have been unsuccessful. What am I doing wrong?
<div style="border-bottom:1px;">
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>
Original answer (still working just fine)
See the snippet below. The idea is to make the <h1> inline to allow the second text to be at the same line.
header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }
<header>
<h1>Text</h1>
<span>text2</span>
</header>
2020 Update
See the snippet the snippet below that makes use of Flexbox. So instead of setting the h1 to an inline-block, you can make the header a flex container. A flex container will (by default) layout its children on a horizontal axis.
Note that you also need align-items: center to keep the h1 and span on the same vertical axis. Also, note that you might want align-items: baseline if you want the texts to appear on the same baseline (like my original answer).
header {
display: flex;
align-items: center;
/* Remove the next line if you want the span to appear next to the h1 */
justify-content: space-between;
border-bottom: 1px solid #000;
padding: 10px 30px;
}
<header>
<h1>Text</h1>
<span>at the end</span>
</header>
I came up with a simple solution. My requirements are slightly different in that I want my status right aligned.
.my-header h2 {
display: inline;
}
.my-header span {
float: right;
}
<div class="my-header">
<h2>Title</h2>
<span>Status</span>
</div>
<div style="clear:both"></div>
Add this line border-bottom:1px solid #000
<div style="border-bottom:1px solid #000;">
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>
DEMO
Use class name instead of inline-style.
Try
<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>
instead?
There are two methods to accomplish H1 and TEXT inline. To clarify, TXT is in an element container. You suggest DIV, but any symantic element will do. Below, h1 and p illustrate a common use, while showing that you need not hide from element blocking, using DIV's (though divs are pandemic for many javascript coders).
Method 1
.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a's link family...</h5>
<p class="inline">
Method 2
h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>
I think you should write like this :-
HTML
<div style="border-bottom:1px solid black; overflow:hidden;">
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>
CSS
h1 {
float:left;
margin:0px;
padding:0;
}
.right {
float:right;
margin:0px;
padding:0px;
}
DEMO
EVEN YOU CAN USE THIS METHOD ALSO WITH MINIMIZED MARKUP :- DEMO