Please check the below link :
http://example.com/1/23.php
Here I am trying to align the span text eg Messages and photos such that it should appear in the middle wrt the icon.
Any help will be highly useful
Below is the code :
<div style="padding-left:20px">
<img src="icons/trophy1.png" > <span style="display:inline-block;padding- bottom:5px;"> Messages</span>
<br>
<img src="icons/trophy1.png" > <span style="display:inline-block;padding-bottom:5px">Photos</span>
</div>
You could achieve this by setting the icon as the background of the span and change the line-height to the height of your icon.
span.trophy {
background: url(icons/trophy1.png) no-repeat 5px 3px;
height: 32px;
text-indent: 30px;
line-height: 32px;
}
You can use a DIV element to achieve this.
You should use the CSS text-align property on the container.
<div style="text-align: center;">
<img src="icons/trophy1.png" >
<span style="display:inline-block;padding-bottom:5px;"> Messages</span>
</div>
Related
I have a client's website that I am trying to fix... The booking page should have the address on the left and the contact form on the right and the white box should fill the webpage.
At the moment, the DIV box just aligns to the left and this means that the contact form and address are squashed together. What can I do? Here is the webpage
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
.box2 {
display: inline-block;
padding: 20px 20px;
max-width: 100%;
}
<div class="content">
<div class="wrap">
<div class="contact">
<h1>Book an Appointment Online or via Telephone/Email:</h1>
<div class="section group contact1">
<div class="col span_1_of_3">
<div class="company_address">
<h3>Company Information:</h3>
<p>BY APPOINTMENT ONLY</p>
<p>Imani Skin Clinic,</p>
<p>8-10 Sneyd Street</p>
<p>Cobridge</p>
<p>ST6 2NZ</p>
<p>United Kingdom</p>
<p>Phone:+447305585588</p>
<p>Email: <span>info#imaniskinclinic.com</span></p>
<br />
<br />
<div id="share-buttons">
<!-- Twitter -->
<a href="https://twitter.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Instagram -->
<a href="http://www.instagram.com/imaniskinclinic" target="_blank">
<img src="images/insta.jpg" alt="Instagram" />
</a>
</div>
<br />
<br />
</div>
<div id="contact"><a class="shedul-embed-button-link" style="overflow: visible; cursor: pointer; background: rgb(248,171,190); color: rgb(255, 255, 255); border: 0px; display: inline-block; outline: none; padding: 10px 15px; margin: 0px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 16px; text-decoration: none; border-radius: 3px; -webkit-appearance: none; box-shadow: none;" href="https://www.fresha.com/providers/imani-skin-clinic-ltd-cgfhlxsq">Book Now</a><script>!function(e){var t="shedul-embed-button-loader",d="https:"===e.location.protocol?"https":"http",n=e.getElementsByTagName("head")[0];if(!e.getElementById(t)){var o=e.createElement("script"),p=e.createElement("style");o.id=t,o.src="https://app.shedul.com/embed_button.js".replace(/^\w+/,d),p.type="text/css",p.innerHTML=".shedul-widget-open { position: fixed; overflow:hidden; }",n.appendChild(o),n.appendChild(p)}}(document);</script></div>
</div>
<div class="col span_3_of_3">
<div class="contact-form">
<div id="zbwid-fbedad33"></div>
</div>
</div>
You've to do two things first give contact1 class to 100% width, though it's already there but syntax error. Put !important otherwise it will be overruled
.contact1{ width: 100% !important }
Then div that contains col span_3_of_3 classes, give this div a class with floating point
.your-class-name{ float: right !important }
You are good to go
For the class ".section", make width 100% instead of auto.
Above the div class="company_address", there is one div with class "col span_1_of_3",
For ".span_1_of_3", increase width to 50%.
And for ".col span_3_of_3", increase width to 30%, and set float: right.
You may adjust the widths according to your needs and for responsive design.
Start by fixing your HTML to mark all needed elements - container (or wrapper) and contact box + address box inside it. Then you can float the contact box and address box to the left or right. Also your CSS is targeting 2 classes that do not exist in your HTML.
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
Can't center text vertically with a link, this is my html code:
<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
<p style="">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
I've tried to specify vertical align, to p tag, also tried line-height, but no success, link still is out of position.
jsfiddle : http://jsfiddle.net/85q6wqjx/
You can realize this layout as follows.
First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.
Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.
Third, apply vertical-align: middle to the p element for it to have the
desired effect.
This approach will work with any number of text lines, as demonstrated.
See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/
.panel {
background:#F7C0B9;
width:645px;
height:170px;
margin:0 auto;
outline:1px solid #FFF;
text-align:center;
line-height: 170px;
}
.panel p {
vertical-align: middle;
display: inline-block;
border: 1px dotted gray;
line-height: 1.25;
}
<div class="panel">
<p>Text<br /> Link<br>a 3rd line for example</p>
</div>
If you want the Link under the text but still both in middle:
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;">
<p style="display:inline-block;">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
JsFiddle
Your line-height was pushing it outside the div and the p being a block element was stopping it from going under. You needed to make p an inline-block element.
If you want them both on the same line, remove <br> from the html.
JsFiddle
br is a line break and line-height effects by that.
Please remove <br> tag you will get what you want
and update your code snippet with
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
<p style="margin: 0;">Text</p>
Link
</div>
http://jsfiddle.net/85q6wqjx/10/
Just add following code to your css file
a {
margin-top: -8%;
display: block;
}
give class/id name to anchor tag if you want to add style particular anchor tag
I am not exactly sure why the text does not center in the title class span.
<div id="vid_display">
<span class="title">SampleText</span></br>
<span class="desc">Sample Desc</span>
</div>
Stylesheet
#vid_display {
height: 500px;
width: 700px;
box-shadow: 10px 10px 5px #888;
}
.title {
font-family: cursive;
font-size: 20px;
font-style: bold;
text-align: center;
}
text-align doesn't have any effect on inline elements like span tags. You need to apply your text-alignment onto the parent element that is display:block; like the <div> or <p> that is wrapping the span.
You might be better off with something like this:
HTML
<div id="vid_display">
<p class="title">SampleText</p>
<p class="desc">Sample Desc</p>
</div>
CSS
.title { text-align: center; }
Update: Here is a working sample: http://codepen.io/anon/pen/jEnys
is an inline element and not a block. Use div instead:
<div id="vid_display">
<div class="title">SampleText</div><br>
<span class="desc">Sample Desc</span>
</div>
Use
<div class="title">SampleText</div></br>
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
<span> defaults to being display:inline; whereas <div> defaults to being display:block;.
I have following HTML output which i can not change. These are just two links, one of them is text link, while other is the image.
The problem is that the image is appearing bit higher position than the text. I am trying to align the text in the middle of the image but not getting any success.
I have tried setting the padding-top, margin-top and vertical-align to the image, but none of them seem to work. I'll appriciate any help.
HTML:
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
JSFiddle:
http://jsfiddle.net/e3vnQ/
Try using display: inline-block and vertical-align: middle: http://jsfiddle.net/e3vnQ/7/
add align="top"
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg" align="top">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
you can write the css like this :-
when anchor tag will come in p tag will stay vertical-align:middle; through mentioned below css
p{
font-size: 12px;
border: 1px solid red;
}
p a {
display:inline-block;
vertical-align:middle;
}
.link img{
margin-top: 5px;
}
or see the demo :- http://jsfiddle.net/e3vnQ/13/