When resizing, the Bootstrap panel-footer stands out with text aligned center both horizontally and vertically

I am working with a panel-footer in Bootstrap. I successfully centered the text inside using the text-align property in the css and also managed to center it vertically (all within the css). Here is the snippet of the css code:

.panel-footer{
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
  text-align: center; 
  color: #777;
  border: 1px solid;
  border-color: #e7e7e7;
  background-color: #FFFFFF;
}

Now, here's how it looks like in the html page:

<div class="panel-footer">
    Title and text - More text - Tel. +00 0000 00000  Fax. 0000 000 000 - <a href="privacy.php"><u>Privacy Policy</u></a> - <a href="cookie.php"><u>Cookie Policy</u></a>
</div>

However, when resizing the page, the text jumps around. Upon investigation, I found that the vertical alignment issue stems from this particular part of the css code:

line-height: 80px;

Are there any alternative methods to achieve vertical alignment for the text?

htmlcsstwitter-bootstrap

Answer №1

The issue arises due to the height setting of the div being 80px; you may want to consider using a different unit of measurement. For instance, try height: 20%;

.panel-footer{
   padding: 0 15px;
   height: 20%;
   line-height: 80px;
   text-align: center; 
   color: #777;
   border: 1px solid;
   border-color: #e7e7e7;
   background-color: #FFFFFF;
 }
<div class="panel-footer">
    Title and text - More text - Tel. +00 0000 00000  Fax. 0000 000 000 - <a href="privacy.php"><u>Privacy Policy</u></a> - <a href="cookie.php"><u>Cookie Policy</u></a>
</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

Customize Bootstrap to change the hover color of a button

I'm currently working on customizing the style of my buttons so that when hovered over, they become a lighter shade instead of a darker one. I've explored the Bootstrap customization page (http://getbootstrap.com/customize/), but unfortunately, t ...

htmlcssresponsive-designtwitter-bootstrap-3

Using the same ID tags for dynamically generated videos in a v-for loop can lead to

I am currently in the process of uploading a video file and using v-for to generate video tags with the corresponding video URL. Each tag has an ID of "myVideo." I am aware that having duplicate IDs on a page is not allowed, so how can I ensure that the co ...

htmlvue.jsvideo

Are you accessing the site on a variety of gadgets?

I am currently working on a website with the goal of making it responsive. So far, it looks great on desktops and mobile phones like the iPhone and Galaxy S4. However, I am encountering difficulties in making the website look like it is on a mobile phone w ...

csshtmlmobilescreen

Tips for displaying the webpage background above a specific div by utilizing a differently shaped div

I designed a webpage with a background image. At the top, I placed a div element (let's call it div_1) set to 50% width which creates a horizontal black bar with 60% opacity. Directly above that, towards the left at 50%, I want another div element (di ...

htmlcss

Users report text-shadow not working in Opera browser

Recently, I incorporated a text block into a section of my webpage that utilizes parallax scrolling. This particular text block has been styled to include a subtle text shadow effect. However, when viewing the page in Opera, I encountered an issue where I ...

htmloperashadowcss

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

htmlcssanimation

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...

javascripthtmlcss

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

I am working on a task management app that allows users to create a To-Do list and remove specific items from the list. Currently, I am facing an issue with using 'localStorage' to save the list when the page is refreshed. The problem arises when ...

javascriptjqueryhtml

The webpage is displaying an error stating that "<function> is not defined."

I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...

javascripthtmlfunction

Strategies for effectively engaging with dynamically created forms amidst a multitude of other forms on a webpage

One of the challenges I face is dealing with a page that has multiple forms dynamically generated based on user input. Each form contains two sets of radio buttons, with the second set being disabled by default and enabled based on the users' selectio ...

javascriptphpjqueryhtmlforms

Handling forms in PHP

Can you explain the functioning of isset($_POST['submit']) in detecting the submit button click? What is the purpose of naming each input element with artist[] and using square brackets? Is an array being defined in HTML? I heard that the name ...

phphtml

Display a loading symbol when the iframe is being loaded and also when its source is being changed

Is it possible to have a loading.gif displayed when my iframe is loaded? I managed to do this using some code I came across here: Displaying a loading gif while iframe content loads However, there is a new issue on my website. I have checkboxes and radio ...

javascriptjquerycssiframe

Guide to activating form elements using a JQuery function

I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...

javascriptjqueryhtmlforms

Sending JavaScript functions to PHP files via Ajax

My Current Project: I am currently developing a script that provides users with choices and generates new options based on their selections. To achieve this, I have created two scripts - one for the HTML structure of my page and another for fetching serve ...

javascriptphpjqueryhtmlajax

Enhance the appearance of your forms with the "Bootstrap

I'm having trouble with the input-group-addon class. My HTML code is dynamically generated using JavaScript and follows the same structure across different pages. However, it works on one page but not on another. I can't seem to figure out why! ...

htmlcsstwitter-bootstrap

Photo does not display on HTML webpage

Why isn't my image showing up in the HTML code below? <tbody> <tr> <td>1517 N Lotus</td> <td><img src = "0004livingroombrown.jpeg" alt ="livingroom" width="92"height="120"></td&g ...

html

What is the process for changing an image on a webpage based on a dropdown list selection?

When I came across the site , I was impressed by their feature that allows users to select their currency. By changing the currency, the symbol beside the amount entered also changes accordingly. I am interested in incorporating a similar feature on my we ...

javascriptcssajaxdynamic

text breaks free from the flex container when zooming in

Hi, I am attempting to design a user card-type div that includes images on the left and the username on the right. I have managed to create the layout, but when zooming in, the text is overflowing and escaping the flex container. Here is my code snippet. Y ...

htmlcssflexbox

Struggling to resolve issues with out-of-Viewport elements in my code while using Python 3.7 and Selenium

My current challenge involves troubleshooting my code to resolve the issue preventing me from utilizing the "actions.move_to_element" method to navigate to an offscreen element and click on it. The specific line of code I am focusing on is: Off_Screen_Ele ...

htmlpython-3.xseleniumselenium-webdriverwebdriverwait

What is the simplest method for displaying a collection of list items?

Currently, I am working on a project using React JS. I am trying to display a list using a ul element with each item in the array as a separate li. let listItems; let listItem; while (true){ listItem = prompt("Enter a list item or press cancel t ...

javascripthtmlreactjs