I am having trouble getting the two html tags in my div to be on the same line and align center () and right (). I thought setting display: inline-block; and float: right would align my span to the right side of the div, but it looks like my span is appearing outside of the div tag in the current setup. Is there something that I'm doing wrong in my current setup.
HTML:
<div class="record-card__date">
<p>09/01/2017</p>
<span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
</div>
CSS:
.record-card__date {
text-align: center;
background-color: #014421;
color: #FFF;
padding: 0 15px 0 15px;
margin: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.record-card__glyphicon {
display: inline-block;
float: right;
margin: 2px 0 0 0;
}
You are using a block level <p> element which will occupy 100% of the space. Then trying to force an inline element in the same line. It would be far better just to insert your icon into the paragraph at the end and accomplish the same thing by floating your icon to the right.
<p>09/01/2017
<span class="glyphicon glyphicon-circle-arrow-up record-card__glyphicon"></span>
</p>
The p element is a block element, so it automatically creates a line break. All you need to do is have both the p element and span elements be set to "inline-block". You do not need to use "float" at all. Using float:right; takes the element out of flow, which is why it's not showing inside the div.
.record-card__glyphicon {
display: inline-block;
margin: 2px 0 0 0;
}
.record-card__date p {
display:inline-block;
}
Related
When using a <button> inside a <div>, I've noticed if the button is left with no text, an unexpected white space appears below it.
The fiddle here shows it: https://jsfiddle.net/042pt648/ If you comment out the empty button and try the others, they work fine without a white space below. Upon investigation, it seems the height of the parent div with class .post-comments is different when the button is empty. When the white space is visible, the parent div has a height of 25px while the button has a height of 20px, causing the space. In the other cases, the height is the same as the button(20px) just as expected.
Could someone explain what is causing this?
Here is the snippet in question:
.post-comments {
border: 1px solid blue;
}
.comment-div-toggle {
width: 100%;
height: 20px;
border: none;
margin: 0;
padding: 0;
background-color: gray;
color: white;
}
<div class="post-comments">
<button class="comment-div-toggle"></button>
</div>
By default <button> is an inline level element. Try this to get rid of the whitespace:
button {
display: block;
}
Or:
button {
vertical-align: top;
}
I'm trying to center these 2 text elements but having trouble. I have no trouble centering both elements just using text-align:center;, but I actually want the sub-heading and heading to both start from the same point. So it should look sort of like this below, where the heading text is directly in the center. I hope I've made myself clear, I can provide a picture if necessary.
I should mention that these divs are responsive, so it would have to apply to any size not just "put left: 50%" or something like that :P
sub-heading
heading text here
<div>
<img class="center-block" src="img/shop-1.jpg">
<span>
<p class="sub-heading">sub-heading</p>
<p class="heading">heading text here</p>
</span>
</div>
CSS:
.shop span {
position: absolute;
top: 30%;
left: 0;
width: 100%;
}
.shop span p {
padding: 0;
}
.shop span .heading {
color: #fafafa;
font-size: 40px;
text-shadow: 0 0 10px #ecd781, 0 0 20px #ecd781, 0 0 40px #ecd781, 0 0 80px #ecd781;
/*text-shadow: 0 0 5px #ecd781;*/
font-weight: 500;
}
Change your .shop span CSS as follows:
.shop span {
position: absolute;
top: 30%;
left: 50%;
transform: translatex(-50%);
white-space: nowrap;
}
This will cause it to be centered based on the largest of the two headings. (If sub-heading is wider than heading, this won't meet your requirement.)
Fiddle
You may wrap text with an extra div with the following styling:
display:inline-block; text-align:left
Demo: http://codepen.io/Nargus/pen/jEgVMb
Wrapper element will be centered by outer text-align:center; rule, but inside it you'll have text-align:left;
It is a much better way than fixed width and margin:auto; for centering
Wrap both inside an <div> and than use following CSS for the <div>
div {
width: 250px; /* Or the maximum of the wides text */
margin: 0 auto;
}
This will position the div into the center, but let the text be left sided. If the width of the <div> is only max width of the wides text, it should fit.
Fiddle: http://jsfiddle.net/xLgxsme7/
edit
If you want to use your <span> than you have to make it display: block;, because you can't change the width of an inline-element.
Have you tried positioning your P classes using relative? It could work.
PS: your img tag isn't closed, insert / before >
What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
Hey I want to put that lower div box beside that upper box with details but when I try to position absolute it I goes down idk why (I made the parent div of all three divs as position rlative ) , how am I supposed to fix this or any other better way to do this .
Here is the screenshot -
http://www.findportugal.com/Untitled.png
Div Description
#user_panel - div around all the other divs ie parent div
#user_details - div with details on top
#user_photos - div with photo heading
#user_current - div at the lower part
CSS :
#user_panel
{
color: white;
position: relative;
}
#user_details
{
padding: 0 0 30px 0;
}
#user_details table
{
padding: 30px 20px 10px 30px;
border: 1px solid grey;
margin: 0 60px 0 40px
}
#user_details table tbody tr td#right
{
padding: 0 0 0 100px;
}
#users_title
{
padding: 20px 0 0 50px;
}
div#user_photos
{
width: 850px;
height: 230px;
border: 1px solid grey;
margin: 50px 0 0 40px;
padding: 0 0 20px 20px;
}
#user_current
{
border: 1px solid grey;
width: 320px;
position: absolute;
}
You want a div OVER another div and you are saying it should NOT OVERLAP which is not possible, instead decrease the size of upper div, use float: left; and this will let the div below shift besides the floated div
Also don't forget to clear floats, or you'll spend other 2 hours thinking what the hell is going on with the element positions as well as background color
And if you want to use position: absolute; than the div will overlap, so in this case, use position: relative; for the container element and than use position: absolute; with top right bottom left properties to set your element correctly.
Don't forget position: relative; else your absolute div will run wild in your page
I'm assuming you want to place that lower div box in the empty space to the right of the upper-left div box, and not actually overlapping the other box? If so, you would be better off using floats.
You haven't shown your html, so let's assume the upper-left box has an id of "details", the bottom box has an id of "current-pic", and the full-width box in the middle in your screenshot as an id of "photos". A starting point for building the layout would then be like the following.
EDITED: Sorry, I wrote the answer before you updated your question with your HTML. The code is rewritten below to show the ids in your original html.
The HTML could be:
<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>
The basic layout CSS would be something like:
#user_details {
float: left;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_current {
float: right;
width: 50%;
box-sizing: border-box;
/* other styling stuff like padding, etc. */
}
#user_photos {
clear: both;
}
This doesn't account for any of the content inside the boxes, or spacing between the boxes, but the box-sizing rule will help you to maintain your layout and build up margins, padding, and borders without them breaking it.
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}