Alignment of the button in a vertical position

Hey there! I've got a button set up with Bootstrap for centering, but now I'm looking to vertically align it in the middle of the page without any margin or padding. Any ideas on how to go about doing that?

Here's the HTML code:

<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
    <button class="case-study-button">
      <a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
    </button>
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

And here's the CSS code:

/* styling without margin and padding */

.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

Answer №1

To centrally position the button, you can set its absolute position to 50% and then apply a transform translate property. It's important to avoid using fixed widths for the button as it may lead to responsiveness issues.

.container {
  border: 1px solid black;
  height: 300px;
}

.centered-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  height: 61px;
  max-width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 container"><button class="centered-button"><a href="#"> CENTER BUTTON <span class="fa fa-angle-double-down"></span></a>
                </button></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

Answer №2

Applying the CSS property 'display:flex' to its parent div along with 'align-items:center' can help center the elements.

.btnOuter{
  display:flex;
  align-items:center;
  height:500px
}
.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
  <div class="btnOuter">
  <button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a></button>
    </div>            
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

Answer №3

Modify the CSS section as shown below:

.portfolio-btn {
  height: 15%;
  width: 300px;
  border-radius: 20px;
  background: rgba(0,0,0,0.5);
  border-color: #333;
  border-width: 3px;
  position:absolute;
  top:50%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Refresh Function Malfunctioning

Currently, I have a JavaScript code snippet on my website that automatically refreshes an iframe every three seconds. window.setInterval(function() { reloadIFrame() }, 3000); function reloadIFrame() { var frame = document.getElementById("if ...

Ways to show error at the top of the page rather than next to the input HTML element

Is there a way to show errors at the top of the page instead of next to the input HTML element? Please provide suggestions. <ng-form name="frmdisbursementScheduleMaintenance"> <div style="padding-bottom: 8px;"> &l ...

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...

verify access with mysql database

Need urgent assistance, sorry if this is a repeated query due to my username! I am facing an issue with my login page. I want it to redirect to my home page when authentication fails by cross-checking input with a MySQL database which should output succes ...

Ways to avoid overlapping between bootstrap columns

Currently, I am honing my skills in Bootstrap by creating a simple example with 3 columns of varying sizes: 2, 8, and 2. However, I have noticed that on certain screen sizes, the contents within these columns overlap each other. My goal is to prevent this ...

Are there any "Undefined" tabs hiding in your RMarkdown tabsets?

After knitting my RMarkdown document to an HTML file, I noticed that the tabs appeared as shown below: https://i.sstatic.net/x1p70.png However, when I save and share the document with my audience, I encounter an issue where these tabs are labeled as "und ...

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

Ways to display closing tag in minimized code in JavaScript documents

I am encountering an issue where the closing tag of folded code is visible in my HTML file, but not in my JS files (specifically JSX syntax). I apologize if this is a trivial question, but I am hopeful that someone can assist me in making the closing tag ...

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...

I am interested in designing a navigation bar with varying background and hover colors for each individual block

I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class. Below is the code for the navigation bar: header ...

Tips for validating a form with the assistance of jQuery

While there are multiple answers out there for this particular question, I am specifically interested in validating an entire form with dynamic input fields sourced from a database similar to Google Forms. HTML <div class="rs_card"><spa ...

Is there a way to attach a JavaScript event to a textarea without directly accessing it?

I am curious about how to incorporate the following code: onblur="hcb.watermark.blur(event)" onfocus="hcb.watermark.focus(event)" style="color: rgb(136, 136, 136); into a textarea with the id "HCB_textarea" and the class "commentbox hcb-shadow-r," withou ...

Creating vibrant tables with unique color schemes using Thymeleaf

Is there a way to create a table with different colors using Thymeleaf? I have a list of events with risk weights represented by integer values. Each column in the HTML table should be colorized based on certain conditions. For example, if the risk is le ...

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

Discovering the position of elements in relation to their (grand^N)parent

Among my possessions are elements A and B. B has the ability to exist as a direct child of A, or there may be anywhere from 0 to N elements separating them. It is imperative that I determine how B is situated in relation to A, specifically noting the dist ...

CSS - Overlapping elements on smaller screens due to being stacked

I am encountering an issue with a column of elements stacked below each other in my code. Here is a simplified version of my implementation: <div style="position: relative; height: 100%;"> <div style="position: absolute;">Really long text h ...

"Enhancing User Interaction with jQuery Hover State Dropdown Menus

Here's my issue: I've created a drop-down menu and I want the text color to change when hovering over the menu. Additionally, I'd like the hover state to remain active when hovering over the submenu. Currently, I'm using this code: $( ...

Exploring the Play Framework: Building basic HTML hyperlinks

I've been working on a website consisting of multiple HTML files and a CSS file, but now I'm looking to transition to the Play! Scala Framework. However, I’m facing difficulties in understanding how to connect one HTML page to another. Current ...

Encountered an error in React where the declaration file for a module could not be located

New to Typescript and trying to incorporate a splitter into my project. I'm utilizing SplitPane from "react-split-pane/lib/SplitPane" and Pane from "react-split-pane/lib/Pane" in my Typescript project, but encountering an error: Could not find a de ...