Ensure that the text panel is properly aligned directly under the logo

I need help achieving a layout similar to the image linked below:

https://i.sstatic.net/GTOJF.jpg

In my design, the red box represents my company logo with some text hidden. However, in my attempt shown in the second image here: https://i.sstatic.net/7xYGE.jpg

Unfortunately, my CSS and design skills are lacking. I'm struggling to center the text under the logo properly, match the font from the original image, and align the button within the panel.

Currently, I am using Bootstrap v4.1.3

Here is the HTML code I have written so far:

body {
  background-color: black;
}
    
#centreElement {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid black;
    background-color: white;
    box-shadow: 1px 1px;
    max-width: 440px;
    padding-top: 20px;
}

#button-wrapper {
    float:right;
}

.centreLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
}

.panelRow {
    margin-bottom: 20px;
}

.btn-primary {
    text-align: center;
    color: black;
    background-color: #99E5EA;
    border-color: #99E5EA;
}

Any suggestions on how to better center the panel and the text under the logo separately?

htmlcssbootstrap-4

Answer №1

There are two methods to create a container that includes the company logo and panel, positioned at the center of the screen:

  1. A fixed width container with left and right auto margins
  2. A fluid width container utilizing Bootstrap grid system (e.g., rows and columns) with content centered justified

To align the text and button within the card/panel in the center, you can utilize text-align:center; or the Bootstrap utility class .text-center.


Fixed Width with Left/Right Auto Margins

<body>
    <main id="site-main">
        <div class="company-logo"></div>
        <div class="card text-center">
            <div class="card-body">
                <p>...</p>
                <button />
            </div>
        </div>
    </main>
</body>

#site-main {
    width: 30rem;
    margin: 3rem auto;
}

.company-logo {
    height: 5rem;
    background: red;
    margin-bottom: 2rem;
}

https://i.sstatic.net/gZeUu.png

demo: https://jsfiddle.net/davidliang2008/trudcsxj/12/


Utilizing Grid System

As Bootstrap rows and columns are now constructed using flexbox, it's simple to create a single row and column with justify-content:center; for centering the container.

With this method, you can also choose different column widths for various breakpoints.

<body>
    <main id="site-main" class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-11 col-md-9 col-lg-7 col-xl-5">

                <div class="company-logo"></div>
                <div class="card text-center">
                    <div class="card-body">
                        <p>...</p>
                        <button />
                    </div>
                </div>

            </div>
        </div>
    </main>
</body>

.company-logo {
    height: 5rem;
    background: red;
    margin-bottom: 2rem;
}

https://i.sstatic.net/gYo1S.png

demo: https://jsfiddle.net/davidliang2008/trudcsxj/17/

Answer №2

Check out this new code snippet:

body {
  background-color: black;
}

.container {
  max-width: 75%;
  margin: 0 auto;
}

.logo {
  background: red;
  height: 100px;
  margin-bottom: 1em;
}

.content {
  background: white;
  padding: 1em;
  text-align: center;
}
<div class="container">
  <div class="logo">
  </div>
  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <button class="btn btn-primary">
    Hello
  </button>
  </div>
</div>

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

Injecting external HTML into a Razor view with Html.Raw is causing the page's HTML to display incorrectly

I have a separate external HTML file, which serves as the body of an email. This HTML file contains all necessary tags and elements for a complete HTML structure. I am trying to display this email content inside a Bootstrap modal. <div class="moda ...

htmlasp.netasp.net-mvcrazor

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

How can I use React to selectively print a section of a webpage?

I need to print only the Bill section of my page when a button is clicked. How can I achieve this without printing the entire page? I tried using window.print() within a function, but it ended up printing the entire page instead. ...

htmlreactjsprinting

Using CSS margins for elements lacking specific widths

Is there a way to centrally align a div element that doesn't have a set width? <html> <head> <title></title> <style type="text/css"> .outer { padding: 10px; /*margin: auto; (doesn´t work)*/ ...

htmlcsscentering

Creating a function that counts the number of times a button is clicked

I want to have the "game" button appear after the user clicks the "next-btn" 2 times. Once the multiple choice test has been completed twice, I'd like the game button to show up and redirect the user to a separate HTML page called "agario.html." I&ap ...

javascripthtml

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

javascriptjquerycsshtml5-videovideo-player

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

cssbootstrap-4bootstrap-5linear-gradients

Error 401: Unauthorized access to CSS files in MVC

Initially, I am aware that this issue has been discussed here before, but none of the suggested solutions have worked for me. I have encountered a problem with adding my own CSS files to a new web project I created. The default code template provided by VS ...

cssasp.net-mvc

Set the height of CSS3 to 100% full

I'm struggling to articulate my question, so please feel free to suggest a better title or guide me in the right direction. I'm working on a website using a mix of HTML5 and CSS3, and I want it to display consistently across various browsers. H ...

htmlcssheight

Continuous Playback of Sound

Is there a way to autoplay an audio in loop without being blocked by browsers? Code : <audio id="audio1" src="assest/sound/1.mp3" autoplay="" /> <script> a = document.getElementById('audio1&apo ...

javascriptphphtmljquerycss

How can jQuery determine if multiple selectors are disabled and return true?

I am currently working on a form in which all fields are disabled except for the "textarea" field. The goal is to enable the "valid" button when the user types anything into the textarea while keeping all other inputs disabled. I initially attempted using ...

javascripthtmljqueryforms

Optimizing loading times for mobile banners through media queries

I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does t ...

cssmobilemedia-queriesloadingbanner

Issue with Bootstrap carousel control not switching back to the previous slide

Interestingly, the carousel is functioning for sliding to the next slide but not for going back to the previous one. I'm still getting the hang of jsfiddle, as you can see, highlighting works for the next slide but not for the previous. Check out the ...

jqueryhtmltwitter-bootstrap

Blend 2 text layers in HTML/CSS

I'm trying to create an effect where two titles overlap each other, with the white title appearing as a border around the black title. However, I'm having trouble figuring out how to achieve this. The light grey box represents the enclosing div. ...

htmlcss

Can you identify the selected item on the menu?

My goal is to highlight the menu item for the current page by adding a "current" class. I've tried several code snippets from this website, but most of them didn't work as expected. The code I'm currently using almost works, but it has a sma ...

javascripthtmljquerycsswordpress

Utilize PHP within an HTML form for action without causing a redirection

I am working on an HTML form that looks like this: <form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php"> On the form, there is a submit button that triggers the verify() function: <a href="#" class="button1" onClick="v ...

javascriptphphtmlforms

Guide for using JavaScript to obtain the current line position within a contenteditable div during a keypress event

I am in the process of developing a customized editor using a contenteditable div. I require a javascript code that can determine the line position of the current caret position during a keypress event. It should be able to adapt when new lines are added o ...

javascriptjqueryhtmlcss

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

htmlcss

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui