text meant to be centered inside a div

I am currently utilizing Bootstrap 3 to design my website, where I have set up divs for each section to occupy 100% of the space regardless of browser manipulation. My goal is to keep my content centered within these sections at all times.

Struggling with achieving this objective.

Shown below is the code snippet:

<div id='imgDiv'>
    <div class="container" style="padding-top: 300px;">
        <a href="#imgDiv3">Smoothscroll</a>
        <center>
            <h1 style="font-size: 32px; font-weight: 300;">Header</h1></center>
        <center>

            <h2 style="font-size: 20px;font-weight: 300; padding-top: 30px;">My name</h2>           
        </center>
    </div>  
</div>


html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    font-family: 'Ubuntu', sans-serif;  
}
#imgDiv {
    position:relative;
    height:100%;
    background-color: #1ABC9C; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFF;
}
htmlcsstwitter-bootstrap-3

Answer №1

If I grasp your intention correctly...

View the Demo Fiddle

Here is the HTML code snippet:

<div id='imgDiv'>
    <div> <a href="#imgDiv3">Smoothscroll</a>    
         <h1>Header</h1>    
         <h2>My name</h2> 
    </div>
</div>

This is the corresponding CSS code:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    font-family:'Ubuntu', sans-serif;
}
#imgDiv {
    position:relative;
    height:100%;
    width:100%;
    background-color: #1ABC9C;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFF;
    display:table;
    text-align:center;
}
#imgDiv > div:first-child {
    display:table-cell;
    vertical-align:middle;
    width:100%;
}

Additionally, it is recommended to eliminate the center element and transfer your styles to a stylesheet for better organization.

Answer №2

To achieve center alignment, make sure to apply margin:auto to both the left and right sides.

#imgDiv {
 margin: 0 auto;
 width:100px;
 ....
}

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

How to properly set margins for button components in Material UI

I'm working with a centered Toolbar in Material UI that consists of 3 components, each being a button. My goal is to add some margin around each button. I attempted to use the {mt} option within the component button, but didn't see any changes re ...

cssmaterial-ui

Guide to implementing a universal animated background with Angular components

I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...

cssangular

The footer fails to adhere to the bottom of the page

Struggling to keep my footer at the bottom of the page when there is minimal content. I attempted using: position:absolute; and bottom:0; It appears to stay in place, but when more content is added, it ends up going "under" the footer that remains n ...

htmlcssfootersticky-footer

What is the best way to evenly distribute items in nested CSS Grid Columns?

Check out this JSFiddle link for a simple Google.com recreation. I'm attempting to organize the top navigation bar by creating separate containers for About, Store, Gmail, and Images. The issue seems to be related to the justify-items:center; propert ...

htmlcss

The actions performed within an event listener function are undone once they have been carried out

I'm a newcomer to Javascript and I am currently experimenting with it. While browsing through a tutorial on w3schools, I came across an example of changing the color of a button after clicking on it. My idea was to take it a step further by loading a ...

javascripthtmladdeventlistener

Updating a PHP variable from a different PHP file

I am trying to incorporate a navigation bar on all my pages using a PHP file. Although the navbar itself is working fine, I am facing issues in making the active navbar button work properly... Here is the content of my navbar.php file: <nav class="nav ...

phphtmltwitter-bootstrap

show items in UL LI elements as "inline" within a bootstrap column

Struggling with organizing UL LI items in a bootstrap setup? Trying to make them align horizontally instead of vertically but can't figure it out. Here's my code: <div class="container-fluid" style="margin-bottom:45px;"> <div cl ...

htmlcssbootstrap-4

Guide on creating an accessible table with rows that can be selected

Managing accessibility in a web application can be challenging, especially when dealing with features like selecting multiple rows using checkboxes. In my current project, I have a view that displays a list of items and allows users to select multiple rows ...

angularjshtmlaccessibility

The entity referred to as [object Object] lacks the capability to execute the 'addEventListener' method

When I add the most recent version of jQuery from the official site, like this: <script src="http://code.jquery.com/jquery-latest.js"></script> The issue arises on line 3 of the code below (pscript.js): function init() { $("textbox").foc ...

javascriptjqueryhtml

What is the best way to achieve this smooth scrolling animation on the page?

While browsing the website , I noticed a unique page scrolling effect that caught my eye. Unsure if they were using default bootstrap code or their own custom code, I was intrigued by how it worked. I attempted to find similar effects online but struggled ...

htmlvertical-scrolling

The slidespercolumns feature seems to be malfunctioning within the swiper slider

I am attempting to display columns based on a slider using swiper version 6.5.8. This is the HTML code: <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swip ...

javascripthtmljqueryswiper.js

What is the best way to focus on an object using a particular variable in javascript?

I am currently developing an online game where each user is assigned a unique ID. Below is the client code used to create a new player: const createNewPlayer = (id) => { return player[player.length] = { x:0, y:0, id:id } } The ...

javascriptarrayshtmlobject

Tips on styling the initial word with CSS

Is it possible to change the color of the first word within a div tag using CSS? <div class="head-logo"> <? echo $siteName ?> </div> CSS .head-logo{ text-align:center; color:#000000; font:normal 22px Tahoma; marg ...

phphtmlcss

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

javascriptjqueryhtmlcss

What is the solution to preventing the materialize navbar tabs from underlining and changing color?

Wondering if anyone has a quick fix for stopping the color change and underline effect on Materialize navbar links when hovering over them. Using React here. See the comparison images for reference. This is the desired look: https://i.sstatic.net/E6Yzk.p ...

htmlreactjsnavbarmaterialize

Adjust the color of the chosen <li> item to a different shade

I want to change the text color of the "Sale" item, but not a phone number using only CSS. Unfortunately, I am unable to modify the HTML code. https://i.stack.imgur.com/PPnna.png .menu.left a:first-child { background: yellow; color: red; } https ...

css

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

css

Flexbox implemented for responsive Three Column Layout

Recently, I set up a small poll with three layout columns. On Desktop, everything looks great but the problem arises when viewing it on a mobile screen. People are displayed one under the other followed by the questions. I want to rearrange it so that each ...

javascripthtmlcssbootstrap-4flexbox

The Angular routing system remains constant and does not alter

I'm encountering an issue with loading a component inside another component. Despite the browser route changing, my component fails to update or display properly... Here is my current setup: --homepage --coins-- --coinspreview <-- I am una ...

htmlangulartypescript

Creating an HTML form that communicates with PHP and ASPX

I recently completed a project where I created a contact us page that sends information to our sales team using PHP for email delivery. The next step in this process is to also send the same customer information to our Sales Fusion CRM system. To accompli ...

phphtml