Skip to main content
T
TheOriginal150mph
Inspiring
May 29, 2021
Answered

Buttons won’t behave

  • May 29, 2021
  • 1 reply
  • 1220 views

CSS experimental site

 

- rectangle buttons will not center horizontally on the page

-  the text will not center vertically in the buttons

 

I see nothing in the html or css directing them flush left. Ive tried everything I can think of to center them on the page including adding align text center; and align content center in every div on the page. Why are they aligning left?

 

To get the text to center vertically in the button Ive experimented ad nauseum using padding and margin numbers to move the text a little up, a little down  - but it refuses to center correctly.

 

    This topic has been closed for replies.
    Correct answer osgood_

    Thanks Ben

    Maybe Flex or Bootstrap is the way to go but theyre whole 'nother systems to learn, and I'm not going to be coding much in the future as coding isn't my thing, so I'm reluctant to use your simple fix and call it a day.

     

    Would love to find how to fix it with regular html/css that I know and understand. I want to know where I went wrong, and I don't think these 2 problems should be a major coding challenge....


    quote

    Maybe Flex or Bootstrap is the way to go but theyre whole 'nother systems to learn, and I'm not going to be coding much in the future as coding isn't my thing, so I'm reluctant to use your simple fix and call it a day.

     

     

     

    There's no need for any Flex or Bootstrap to do this. This is just a matter of getting your current css right, which would be as follows:

     

     

    .intro-buttons {
text-align: center;
text-transform: uppercase;
width:350px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;	
font-family: 'Brawler', serif;
font-size: 1em;
font-weight: bold;
color:#000;
padding: 10px 0;
transition-duration: 0.4s;
margin: 0 auto 10px auto;
}

.intro-buttons a:link {
text-decoration: none;
color: #000;
}
.intro-buttons a:visited {
color: #f2eab7;
}
.intro-buttons:hover {
background-color: #DAB277;
color: white;
}

     

     

    Infact there is absolutely no need to wrap your anchor tags in <divs>, which create redundant code - you could just apply the class to the anchor tags themselves:

     

     

    <a class="intro-buttons" href="_video-multimedia-animation.html" title="L">QUICK LOOK video</a>

<a class="intro-buttons" href="_directory.html" title="Site Directory">Enter Site</a>

     

     

    Then use the slightly revised css below:

     

     

    .intro-buttons {
text-decoration: none;
color: #000;
text-align: center;
text-transform: uppercase;
width: 350px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;	
font-family: 'Brawler', serif;
font-size: 1em;
font-weight: bold;
color:#000;
padding: 10px 0;
transition-duration: 0.4s;
margin: 0 auto 10px auto;
display: block;
}

.intro-buttons:visited {
text-decoration: none;
color: #f2eab7;
}

.intro-buttons:hover {
background-color: #DAB277;
color: white;
}

     

     

     

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 29, 2021

    Add the following style rules

     

            main {
            display: flex;
            flex-direction: column;
        }

        .intro-buttons {
            align-self: center;
        }

     

    Having said that, the whole procedure would be so much quicker when using Bootstrap. You can concentrate on the outcome rather than trying to create the correct style rules.

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      May 29, 2021

      Sorry, just realised that there are two parts to the question. For the second part. remove the <br> from

      <a href="_video-multimedia-animation.html" title="L">QUICK LOOK video</a><br>

      and change the style rules to

      main {
    display: flex;
    flex-direction: column;
}

.intro-buttons {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        T
        TheOriginal150mphAuthor
        Inspiring
        May 29, 2021

        Thanks Ben

        Maybe Flex or Bootstrap is the way to go but theyre whole 'nother systems to learn, and I'm not going to be coding much in the future as coding isn't my thing, so I'm reluctant to use your simple fix and call it a day.

         

        Would love to find how to fix it with regular html/css that I know and understand. I want to know where I went wrong, and I don't think these 2 problems should be a major coding challenge....

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices