Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have an <a> tag embedded in an <h2> tag as shown in http://codepen.io/anon/pen/gpjZaJ. The problem I'm having is that the text of the hyperlink (styled as a button with Bootstrap) is lower than the <h2> text, ie: they're not vertically aligned. I've found that I can better align them by setting the padding of the hyperlink to 0px but that doesn't very good and seems a little hacky. I'm wondering if there's a better way to vertically center the hyperlink.
In the example padding-top was set to 0 and the text did align. I assume you want to keep the padding and still have the text aligned?
Simply set vertical-align: initial on the button (it's set to middle) and it looks good in Chrome: http://codepen.io/anon/pen/WvKLRw
.jumbotron h2 a {
font-size: inherit;
vertical-align: initial;
}
If your question is vertically center the hyperlink,try to add
padding-bottom: 0px; in class .jumbotron h2 a
like this
.jumbotron h2 a {
font-size: inherit;
padding-top: 0px;
padding-bottom: 0px;
}
You'll need to make the link inline-block then vertically align it baseline
.jumbotron {
text-align: center;
}
.jumbotron h2 a {
font-size: inherit;
display: inline-block;
vertical-align: baseline;
}
span {
margin-left: -100px;
}
.jumbotron h2 {
font-size: 48px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="jumbotron">
<div class="container">
<h2><a class="btn btn-info" href="#contact">Contact Us</a> <span>to get your free estimate today.</span></h2>
</div>
</div>
I added a span and moved it over so you can see the alignment.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
Problem:
Interested to know if there are any real-world examples in HTML/CSS when you need to use display: block on inline elements. For the reverse order, I found that display: inline could be used on <li> in a <nav> to display links vertically. I am not interested to know the difference between inline, block, and inline-block.
Current examples:
Current examples include showing how to use the display: block on <span> elements, and so forth. But many of these examples only illustrate the effect of display: block but not the actual use of it on a website.
Question:
For what reason and where on a website could it be relevant to use display: block to change elements from inline-level to block-level?
Let's say you wanted to show a big button that links to a site. You use an anchor (<a>) tag because it can contain a hyperlink.
div {
border: 1px solid black;
padding: 20px;
}
.button {
background: orange;
color: white;
padding: 10px;
text-align: center;
}
<div>
This button's on the same line! <a class="button" href="https://example.com">Click me!</a>
</div>
You add your button, but you've run into a problem: The button's on the same row as all the other text. It's inline!
Adding display: block not only adds a newline, it also gives you more control about the width and height of the button.
div {
border: 1px solid black;
padding: 20px;
}
.button {
display: block;
background: orange;
color: white;
padding: 10px;
text-align: center;
}
<div>
This button's aligned properly. <a class="button" href="https://example.com">Click me!</a>
</div>
If you wanted to control the button's width and height, while keeping it on the same line, you would use inline-block.
Further reading
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a canvas and I want to place some text to its right. This is my HTML code:
<div id="GL">
<canvas id="GL-Surface" width="800px" height="600px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
And this is my CSS code:
#GL {
padding-bottom: 20px;
padding-top: 5px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
}
#side_box {
padding-bottom: 20px;
padding-top: 5px;
}
But for some reason, the sample text is placed under the canvas and if I inspect the site in chrome, I see, that there still is a margin. This is a screenshot from chrome:
The sample text on the bottom is supposed to be on the right.
Why does it still exist? I have set it to 0px.
div elements are block elements. This means, they will always force the next element to go under it.
We can fix this with the css property: display: inline; or display: inline-block;
There is also other ways to accomplish this, like with flexbox or css grid
You can read more about flexbox and css grid here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
In the snippet I'm using the inline css property, and I've given the canvas a border for illustrative purpose.
#GL {
display: inline-block;
border: 1px solid black;
}
#GL-Surface {
height: 200px;
width: 200px;
}
#side_box {
display: inline;
}
<div id="GL">
<canvas id="GL-Surface" width="200px" height="200px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
By default div is block elements, changing it to inline-block fixes the issue-
div {
display: inline-block;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a rectangular-shaped gray div that is supposed to hold a header ("sample text") and a thin turquoise highlight (which is also just a thin rectangle). When I have both the turquoise div and header inside the other div, one gets forced out.
First of all, how can I fix this issue? Also, is there a more efficient way for me to make the turquoise highlight in the gray div?
http://imgur.com/Sm8qy8J,kSuNEh5 (if I have HTML as shown)
http://imgur.com/Sm8qy8J,kSuNEh5#1 (if I remove the turquoise div)
<div class="column w2">
<div id="headerbox">
<div class="highlightbox">
</div>
<h3>sample text</h3>
</div>
</div>
Note I'm using some Sass CSS here:
h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}
#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}
Add float:left to your highlightbox class:
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
float:left;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have the following page:
Page on JSBin
If you look at the top-right-hand corner, then you can see that the settings & chat pic and the username is aligning with the lower border of the profile picture.
How could I make all elements in top-right-hand-corner align in the middle of the top-bar?
The top-bar is supposed to look like that:
EDIT: I have applied the vertical-align: middle property to these elements. However, as you can see at ranganadh's JSBin, the image seems to be a bit too near to the lower corner. Any suggestions on that?
add vertical-align:middle property to class .top-right-button
change to
.top-right-button{
margin-right: 5px;
vertical-align:middle
}
Check JSBin
You need to modify your CSS as follows:
.right-stuff {
position: absolute;
bottom: 2px;
height: 100%;
right: 0px;
font-family: Roboto Condensed, bold;
font-size: 24px;
}
.top-right-button {
margin-right: 5px;
vertical-align: middle;
}
The vertical-align property is not inherited and must be specified explicitly.
By default, your right most image is aligned with the default baseline of the container block. Setting vertical align to middle gives a more pleasing view.
If you need to, use the bottom offset to adjust the overall vertical position of the .right-stuff block.
See demo at http://jsbin.com/uSiTOpU/16/edit
I hope i understand your edit well.
Try to change
#top-right-profile-image {
margin-top: 5px;
width: 40px;
height: 40px;
background-color: #ffffff;
}
to
#top-right-profile-image {
width: 40px;
height: 40px;
background-color: #ffffff;
}
It gives a better looking result.
I believe you simply need to add an valign="top" to your profile image.
<img valign="top" class="top-right-button" id="top-right-profile-image" src="//www.placehold.it/20x20"/ >
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a background img 120x30, but it's not showing in the full size..why?
Please look here http://f1u.org/en - under each article readmore button.
<a> is an inline element. So, an inline element in not take height, width , vertical margin & vertical padding in it's.
Then we have to define display:block in the css like this:
.comments-link, .readmore-link {
display: block;
}
Add display: block;
.comments-link, .readmore-link {
background: url("images/readmore.png") no-repeat scroll 0 0 transparent;
border: medium none;
display: block;
font-size: 11px;
height: 30px;
line-height: 30px;
padding: 0;
text-indent: 8px;
text-transform: uppercase;
width: 120px;
}
The a tags are inline elements so width won't apply, they will automatically resize depending on content. If you change the display to block then you can control the elements width and height and should see the image. You might want to also float them so if you have the comments link and read more link they will be displayed side by side. Add the following to your style sheet:
.comments-link, .readmore-link {
display: block;
float: left;
}