I am using code:
<script>
jQuery('div.io-title-description').attr('align', 'center');
</script>
<style>
div.io-title-description { text-align: center; }
div.io-title-description a:first-child { font-size: 36; font-weight: bold; text-transform: uppercase; color: #1E73BE; text-shadow: 0px 0px; text-decoration: none; }
</style>
to align header of my website: https://news.softsolutionslimited.com
The CSS code is setting all other CSS properties except align in both jQuery and CSS
I have checked your website. And I have made few changes to classes:
.io-title-description {
display: inline-block;
margin: 17px 0;
padding: 14px 0;
float: none;
width: 75%; /* After width is given inline-block will align center */
box-sizing: border-box; /* padding included inside width */
}
.socialmedia {
float: right;
padding: 7px 10px;
text-align: right;
width: 25%;
margin-top: 30px;
box-sizing: border-box; /* Padding included */
}
Changes I made, added width to .io-title-description and border-box to both of them. Because, I added width, the inline-block element will know the width of line and if there is no other element, then it will align items to center. border-box give padding to the element but padding is included inside the width, i.e width will always be same(75%, in this case).
*Note:- I think now you don't have to add jquery to align center, as you have already use somewhere in parent.
Related
I am about halfway through completing a course for learning HTML and CSS, the first time I've ever tried programming, so pardon the (probably) simple problem I have.
I am creating navigation tabs for a fictional website, the tabs being "Menu", "Nutrition", "Order", and "Locations". As you can see, each tab would be a different size because the content varies. I am trying to make a border for each tab, so that the borders would be the same height and width for each one, effectively lining up as four congruent rectangles with words inside of them. The code in HTML for this part that I am working with is:
<nav>
<span>MENU</span>
<span>NUTRITION</span>
<span>ORDER</span>
<span>LOCATIONS</span>
</nav>
The code I currently have for CSS that would effect this is:
* {
box-sizing: border-box;
}
,
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
and
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}
This is the resulting visual
How would I make it so that the borders for each tab would be congruent and in line with each other?
* {
box-sizing: border-box;
}
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
text-align: center;
}
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
text-decoration: none;
display: inline-block;
}
https://codepen.io/stargroup0075/pen/MWwLxMd
You want to
Give the elements with the borders (<a />) display: block;, which causes them to occupy the maximum horizontal space available
Give a container of the blocks (<nav />) display: inline-block;, which makes the container shrink-wrap its content
Give the parent of <nav /> (in your HTML example there is no parent, so I assume it's <body />) text-align: center;, which centers the <nav />, like with your original code.
The resulting CSS would look something like this:
* { box-sizing: border-box }
body { text-align: center } /* Centers child inline content */
nav { display: inline-block } /* Shrink-to-fit content */
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
nav a {
display: block; /* Take up maximum horizontal space */
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}
I recently created a website and after I created a button with a <a> on it, the text kept aligning it self to the bottom of the text.
How do i make the text align to the center horizontally.
I have tried adding this code: "display:table-cell; vertical-align:middle;" to the button's CSS, and I have tried changing the position with these code snippets: "relative, fixed, static etc." But none of them changed the horizontal position of the text.
.button {
background-color: #171717;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
height: 10px;
}
a {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<center>
<button class="button">Buy Now!</button>
</center>
As commented, do not use <center> but text-align or display:flex/grid/table behavior and margin. Also a clickable element is not made to hold another clikable element. Use <button> or <a> . button is a form element and could be tricky to restyle.
example of what you could do :
.button {
/* what seems to trouble you */
padding: 15px 32px;
font-size: 20px;
/* okay so far, but height is half of font-size !! */
height: 10px;
/*Your reset*/
background-color: #171717;
border: none;
color: white;
font-size: 16px;
border-radius: 30px;
text-decoration: none;
/* Now try the layout reset and use flex behavior */
display: inline-flex;
align-items: center;
/* ==> because items too big will overflow from the container */
}
a {
box-sizing: border-box;
}
body {
text-align: center
}
<button class="button">Test me! (form element) </button>
Test me! (hyperlink)
How about adding style="position:absolute" in the button tag?
The problem appears to be – quite apart from the use of obsolete and invalid HTML – that you've defined a height of 10px, with a font-size of 16px and padding of 15px (top and bottom). That sum doesn't add up, the height would require:
16px + 2*(15px) = 46px
to contain the text in the centre. To center the text, though I'm replacing the <a> with a <span> for the purposes of validity, you could simply remove the height declaration:
.button {
background-color: #171717;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
}
span {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<div class="centered">
<button class="button"><span>Buy Now!</span></button>
</div>
I'm trying to put text under a button in HTML/CSS. I want the text underneath the button to be centered vertically together.
I've achieved this but now the text increases the width of the button. I've been trying to do a word-wrap but it seems like its not possible when you use percentages to define your div tag's width.
Is there a way I can center the text with the button and word-wrap it when using percentages for the width?
Thanks
EDIT :
Button definition:
a.button {
background-clip: padding-box;
text-decoration: none;
display: inline-block;
white-space: nowrap;
word-wrap: break-word;
text-align: center;
text-decoration: none;
color: black;
font-weight: bold;
}
a.button span {
display: inline-block;
vertical-align: middle;
margin: 0 0 0 0;
}
The two sections:
div.blockA {
width: 35%;
}
div.blockB {
width: 65%;
}
The image for the button (in a previous post, I tried to layout four buttons in the center):
div.image {
width: 50%;
float: left;
box-sizing: border-box;
padding: 10px;
}
I get a weird text wrap inside a list-item (li).
Check it out: http://demo.hno-eghlimi.de/#footer
I placed a span with an icon (position: absolute -> This is the cause for the wrap) before the main content of the li. I have no idea why the text inside the li is wrapping down. Do you have a solution for my problem?
You need to change two things:
Apply line-height: 30px; to the <li> element. This is because your image is 30px in height.
Apply vertical-align: bottom; to your <span> with the image. This is to vertically align your image with the text.
Also, this will break your padding between the lines, so you may want to add some bottom padding/margin to <li> elements as well.
The resulting code:
Step 1:
.footer .footer-contact-list li {
position: relative;
line-height: 30px; /* add this */
/* here you may also add some bottom margin/padding */
}
Step 2:
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: bottom; /* add this */
}
Just use the below CSS for span
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: middle;
margin: 5px;
}
I am trying to make a menu bar. The container is called: #menu and has the following CSS: border: 0px;
margin: 0 auto;
position: relative;
display: inline-block;
width: 100%;
The problem is that when I set the width of the menubars to 12.5%, they leave space on the side. Sorry but I can't show the real contents so I'm giving this image: https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png . The CSS for the menu_bars is: width: 12.5%;
float: left;
padding: 25px 18px 25px 18px;
background: rgba(237, 157, 28, 0.992157);
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 15px;
height: 20px;
You need to declare this for the .menu_bar_item:
.menu_bar_item {
box-sizing: border-box;
/* more styles */
}
http://jsfiddle.net/teddyrised/eWNSz/1/
The box-sizing: border-box property prevents padding from adding onto the width (that is the default behavior, anyway). With this property declared, you will need to look into adjusting your height property, too.
You should set the left padding to 20px.