I have just started to code. But I ran into a error in my css. The error is that I want the button to align to center but it will not align.
It is probably obvious but I don't know what is wrong.
Please help me. I would love it if you would help.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<h1>Help</h1>
</head>
<body>
<br>
<a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a>
</body>
<style>
h1 {
color: black;
text-align: center;
}
a[target=_blank] {
text-align: center;
}
.button {
text-align: center;
padding: 0 5px 5px 5px;
background-color: #dcdcdc;
border: 1px solid #666;
color: #000;
text-decoration: none;
font-family: "arial";
font-size: 100%;
}
</style>
</html>
I can't find anything on the web
If you say that you did not find anything on the web, you must not have tried at all.
Read up on the margin property and the rest of the HTML and CSS tutorials.
http://www.w3schools.com/css/css_margin.asp
You can either wrap the button in a div, or you can put around it.
Wrapped in div
HTML
<div class="div_name"><a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a></div>
CSS
.div_name { text-align: center; }
Or
<center><a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a></center>
add this to your css
margin:auto;
that will make it align to the center of the page.
you just add
body {
text-align: center;
}
text-align attribute specifies inner element,not this element
Related
[Picture of My Website1
Hey so if you see that image there then I just wanted to know how to put the button in the center, like how the heading is. Like directly under it, text-align does not work for me.
Please let me know if anything in my code is preventing the button from going in the center.
(I am new to HTML)
My code :
<html style = "background-color: lightblue;">
<b
><h1 id="chimp">
Welcome to Monkey Idle!
</h1></b
>
<a class="button" href="" style="text-decoration: none; color: black" id = "button">
Click Here to Play!
</a>
<a id="button2" class="button" href="" style="text-decoration: none; color: black;">
Played before? Click here!
</a>
<style>
#chimp {
text-align: center;
font-size: 50px;
font-family: cursive;
}
#moneycount {
border-style: solid;
}
#button2 {
text-align: center;
background color;
position:absolute;
left: 50%;
font-family: cursive;
background-color: white;
padding: 20px;
position: center;
align: center;
}
#keyframes buttonbounce {
0%{margin-left: 0px;}
100%{margin-left: 10px;}
}
#button2:hover {
animation: buttonbounce 0.1s infinite;
}
#button {
text-align: center;
background color;
position:relative;
font-family: cursive;
background-color: white;
padding: 20px;
}
</style>
</html>
The reason that text-align doesn't work for buttons is that buttons are not considered to be text. When you use text-align, you are centering the text within the parent element, not necessarily the center of the page. Text-align on a button for example will just center the text at the center of the button. If you want to center the button, you can wrap the button in a div, and utilize Flexbox. If you are getting started on web development, I highly recommend the aforementioned Flexbox as well as CSS Grid for page layouts.
#button-wrapper {
display: flex;
justify-content: center;
}
<div id="button-wrapper">
<button>My button!</button>
</div>
how could add css style to this button.
Button html:
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
CSS i want to add
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
If there is answered question, please send link. Thank you
You could add class="button" to the button to make it work. Cause your CSS .button will be used on every element which has the class="button"
function myFunction() {
alert('what ever')
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<button class="button" onclick="myFunction()">Player</button>
Read more about how CSS Selectors work here
<button class="button" onclick="myFunction()">Player</button>
As your button class you've set it ".button" add "button" as a class like above
Anything you put after the . will match the name of the class in the element
https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail
In your case, you're two solutions :
First : use classe, if you've differents buttons in your pages :
you can just add class attribute in your HTML element like that :
<html>
<body>
<button class="btn" onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
And define the style in your class in your CSS :
<style>
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Second : If all buttons are the same style, you can just add style for all element button :
Not change your HTML :
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
But, in your CSS, just change the reference, for select elements button :
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
You can learn more explain about selector (.myClass, #myId, element) here in the mozilla developper website.
Don't forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) :)
Instead of declaring class button i.e(.button) you can apply style to all button elements.
Demo- https://jsfiddle.net/akshay193sw/bxm8wdqk/ Refer link
If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.
HTML Below
<button class='button_thing'> My Button </button>
CSS Below
.button_thing {
background-color: blue;
width: 180px;
height: 100px;
border-radius: 10px;
}
So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?
CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations - Create Spectacular Button Animations with HTML 7 CSS
Update: I've updated my code (thanks to, Kodos Johnson). But I have another problem with the padding for the background image.
When I tried adding a background image inside my button, the text inside it moves outside the button. Can someone please help me? My code is below:
<div>
<button type="button" id="secondBarButton">See How It Works</button>
</div>
---Update 2: I want to add padding or margin for the image.
#secondBarButton {
float: right;
padding: 5px;
margin: 10px;
background-image: url(images/button.png);
}
I cannot make the text move back inside the button and center.
Forget about using a background image for a simple icon. Use icons from FontAwesome, the particular one used on this button is:
fa-play-circle
SNIPPET
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Button</title>
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<style>
#btn1 {
position: relative;
width: 300px;
height: 50px;
border-radius: 25px;
background-color: white;
border: 1px solid #0070BA;
font-weight: bold;
font-size: 0.8em;
color: #0070BA;
line-height: 1;
cursor: pointer;
}
.fa {
position: absolute;
left: 2px;
top: -2px;
}
#btn1:hover {
background-color: #0070BA;
border: 1px solid #fff;
color: #fff;
}
</style>
</head>
<body>
<button id="btn1">
<i class='fa fa-4x fa-play-circle'></i> See How It Works
</button>
</body>
</html>
Showing the HTML would help a lot. Looks like your image is forcing a line break. Have u tried sectioning the image and text with col? That might be a quick and dirty fix to your problem
I want the blue bits of the buttons to all be the same length as each other so it looks cool in a column instead of all messy
context context context
.button {
border: 0px solid #000000;
background: #70D4C7;
padding: 3.5px 7px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
text-shadow: #70D4C7 0 1px 0;
font-size: 20.5px;
font-family: Fira Sans;
text-decoration: none;
vertical-align: middle;
text-align: center;
color: #000000;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div id="button">
<strong>Homepage</strong>
<br>
<br>
<a href="#" style="color: black" class="button"> <strong>exampleexample</strong>
</a>
<br>
<br>
<strong>example </strong>
</nav>
<p></p>
</div>
</body>
</html>
You can wrap each link in a div:
<div>
<strong>Homepage</strong>
</div>
Remove the <br/> tags. And add the following CSS (notice, I moved the background color from your CSS segment to here):
#button > div {
margin: 10px;
width: 100%;
background: #70D4C7;
}
#button {
width: 40%;
}
NOTE: It is generally considered to be poor coding style to use elements for purposes other than which they were intended. So, for example, buttons should be used as buttons, and links should be used as links. Links should not be styled as buttons. But, if you insist on your current structure, the above modifications will produce the following effect:
Here is a Fiddle Demo
<a> is by default display:inline, so it can not have a width. Just add to the class button :
.button{
width:200px;
display:block;
}
and your problem is solved.
I can't seem to get my "Home" buttons to the center. The home text is at the left instead of the center.I have my htm and css linked like this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css"/>
</head>
<body>
<h1>Bully-Free Zone</h1>
<h2>"Online harassment has an off-line impact"</h2>
Home
</body>
</html>
Css:
a.nav-link:link
{
color: black;
text-decoration: underline;
font-family:broadway;
font-size:30px;
text-align:center;
}
a.nav-link:visited
{
color: black;
text-decoration: none;
}
a.nav-link:hover
{
color: black;
text-decoration: none;
}
a.nav-link:active
{
color: black;
text-decoration: none;
}
You could wrap it in a div:
<div align="center">
Home
</div>
Or you can create a class for the div:
HTML:
<div class="myDiv">
Home
</div>
CSS:
.myDiv {
text-align: center;
width: 300px;
}
The text-align property will only center the text within the container it's in. In this case, the a tag is only as wide as the text. So regardless how you set your text-align property on that link tag, it will always appear the same. To center it you need to put it in an element that is wider.
<div id="nav">
<a href="New.html" class="nav-link>Home</a>
</div>
and your css:
#nav
{
text-align: center;
}
Good Luck!
Property text-align:center should be appurtenant to parent element
Link
a {
display: block;
margin: auto;
}
I reply 8 months late but I had the same problem as Backtrack and by trying a combination of the above answers I managed to fix my mishap this way. I share it very respectfully with you, in case someone needs this solution in the future.
CSS:
a {
text-align: center;
margin: 20px;
display: block;
}
It also works if you use an "Id" in the "a" tag.