Achieve vertical alignment and responsiveness of elements in primefaces using css techniques

In order to vertically align 2 elements inside an outputpanel, I initially used a margin-top of 3em. However, this method proved to be non-responsive, as shown in the following images:

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

In mobile view:

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

My goal is to align the right button with the text vertically on all devices.

This is the code I am currently using:

<p:outputPanel class="ui-g">

                <p:outputPanel class="ui-g-8">
                    <h:outputText value="My text will be here" styleClass="enunciadoProtocolo" /><br />
                    <h:outputText value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
                                  styleClass="subEnunciadoProtocolo" />
                </p:outputPanel>
                <p:outputPanel class="ui-g-4" style="text-align: center; margin-top: 3em;">
                    <p:commandButton update="messages" icon="fa fa-file-text" value="View pdf" />
                </p:outputPanel>
htmlcssprimefacesstylesxhtml

Answer №1

To easily center a button with a fixed height, you can use the following CSS:

position:relative;top:50%;margin-top:half of button height;

<p:outputPanel class="ui-g-4" style="position:relative; top:50%; margin-top:-half of button height;">

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

What is the process for customizing styles within the administrative area of a Wordpress website, such as modifying the shade of the admin toolbar?

Can someone provide guidance on changing the color of a specific dashicon in the WordPress admin toolbar? I've tried adjusting the color using the browser inspector, but I can't seem to get it to work when I add the code to my stylesheet. #admin ...

csswordpressadmintoolbardashicons

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

When using HTML5's checkValidity method, it may return a valid result even if

Consider the following scenario: <input pattern="[a-z]"/> If you run the command below without entering any input: document.querySelector('input').checkValidity() You will notice that it actually returns true. This seems counterintuiti ...

javascripthtmlcheckvalidity

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

Currently, I'm attempting to host independent Angular elements that can be seamlessly integrated into a non-Angular webpage. Everything works perfectly fine when there's only one element on the page, but as soon as I try to load two or more, I en ...

javascripthtmlangularelementangular6

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

cssreactjsstyled-components

Adding a cell break line within AG-GRID in an Angular application

I'm trying to display two sets of data in a single cell with ag-grid, but I want the data to be on separate lines like this instead: Data with break line I attempted to use "\n", "\r", and "\br" but it didn't work. Here is my code ...

javascripthtmlangulartypescriptag-grid

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss

Utilizing the Bootstrap grid system to align two div elements in one row, with one centered on the page and the other positioned to

Looking for a solution to align two divs inside a flex container - the first centered horizontally and the second aligned to the right. Requirements: must use bootstrap only. |---------------------------------------------| center ...

htmlbootstrap-4

How can I assign a unique background color to each individual column within a RadioButtonList?

I have an issue with setting 3 repeated columns. I want to assign different background colors to each of them. If you have any ideas on how I can achieve this, please share. Here is the code for my RadioButtonList: <asp:RadioButtonList ID="rblTimeSlot ...

javascriptc#asp.netcssradiobuttonlist

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

What is the best way to position a div at the bottom of the main div?

How can I position a div with the class "boxLinks" at the bottom of the main box with the class "main-box"? Here's my idea: The main class has a width of 1200px; within this main class, there are 5 divs with each div having a width of 25%. .main- ...

htmlcss

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

javascriptjquerycss

Top 10 SQL Query based on two specific columns

As a beginner programmer diving into the world of SQL, I am on a mission to create a table for my website that showcases the lowest 10 grades alongside student information. While I feel confident in most aspects of this task, I am struggling with crafting ...

phphtmlsqlsql-server

What is the best way to make a div that maintains its size even when the content inside is modified?

My goal is to develop a media feed that includes various types of content such as text, images, and videos. To ensure user safety, I want to conceal any explicit posts with a warning that requires the user to click in order to view the content. Although I ...

htmlcss

Navigating through cpanel to interact with a Button using Selenium in Python

Unable to select the new folder option. Here is what I have attempted: driver.find_element_by_id("li.action-newfolder") driver.find_element_by_xpath("//[a(text(), 'New Folder')]").click() Unfortunately, neither of these methods are successful. ...

pythonhtmlselenium

How can you successfully submit empty <select ... multiple> HTML elements via POST method?

Within my HTML form, I have incorporated a multi-select box that allows users to select multiple options at once. <select id="eng_0" name="eng_0[]" multiple size="3"> <option value="Privilégier">Privilégier</option> <option valu ...

jqueryhtmlmulti-selecthtml-select

Tslint is notifying that JSX elements without any children must be self-closing to prevent errors [Error]

Recently, I encountered an issue while trying to build my solution using the command npm run build. The error message displayed was: JSX elements with no children must be self-closing. I came across a similar problem on Stack Overflow but unfortunately ...

htmlreactjstypescriptjsxtslint

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

When PHP is connected to the database, Ajax remains inactive and does not perform any tasks

I am currently working on setting up a simple connection between JavaScript and my database using ajax and PHP. The goal is for JavaScript to receive a name from an HTML form, make changes to it, send it to PHP to check if the name already exists in the da ...

javascriptphphtmljqueryajax

Is there a way to incorporate borders into JqTree?

I attempted the following .jqtree-tree .jqtree-element { border-color: black; border-width: 10px; } It seems that I may be overlooking certain elements to which this CSS should be applied ...

jquerycssjqtree