Ways to align text in the middle of the screen without having it stretch to 100% width

I am looking to align the second block of text in the center. The first block contains an icon that occupies part of the width. Since the second text does not span the full width of the screen, I need the center alignment to take its width into consideration.

There is a third block of text below the first one that does occupy the full width, so I want it to be centered on the screen rather than relative to the block above it.

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

Here's the code snippet I have been working with:

<View style={{ marginBottom: 25 }}>
   <View style={{ flex: 1, flexDirection: "row", alignItems: "center", marginTop: 15 }}>
      <MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close" size={20} style={{ color: "#FFF" }} />
      <Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center" }}>Configurações</Text>
   </View>
   <Text style={{ color: COLORS.white1, fontSize: 24, marginTop: 0, alignSelf: "center" }}>Configurações</Text>
</View>

My Attempts: I attempted to offset the text by applying a negative margin value due to the 30px width of the icon, but this obscured the icon and prevented it from being clickable as intended.

Thank you for any assistance provided; I hope I have effectively conveyed my issue.

cssreactjsreact-native

Answer №1

To create space on the right side of the content and adjust the alignment, you can add a margin to the right.

<View style={{ marginRight: 20, backgroundColor: 'grey', padding: 10 }}>
  <View style={{ flex: 1, flexDirection: "row", marginTop: 15 }}>
      <MaterialIcons name="close" size={20} style={{ color: "#FFF" }} />
      <Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center", marginRight: 20 }}>Settings</Text>
  </View>
  <Text style={{ color: '#fff', fontSize: 24, alignSelf: "center" }}>Settings</Text>
</View>

Answer №2

Transform your button into a grid layout:

div.button {
  background:blue;
  padding:4px;
  color:white;
  font-family:"Verdana";
  width:50vw;
  display:grid;
  grid-template-columns: 5% auto 5%;
}

div.button div.caption {
  text-align:center;
}
<div class="button">
  <div class="left">ICON</div>
  <div class="caption">Your caption here</div>
  <div class="right"></div>
</div>

By using this method, you can specify three columns for your button, placing the icon in the leftmost column, the caption in the center column, and leaving one free column which matches the width of the left one, resulting in the centering of the middle column.

Answer №3

To create a close icon, you can nest it within an absolute view and adjust the left position accordingly. This will ensure that your text is properly aligned with the content below.

<View style={{position:'absolute',left:0}}>      
    <MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close" 
                   size={20} style={{ color: "#FFF" }} />
</View>

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

Obtaining query parameters in getServerSideProps in Next.js: A guide

Here is an example of my URL: http://localhost:3000/success?merchant=xxxxxx&order_id=xxxxx&payment_ref_id=xxxxxxx&status=Aborted&status_code=9999&message=Not%20a%20Nagad%20account I am trying to extract the payment_ref_id from the URL ...

reactjsnext.js

Personalized Design Incorporating Sections and Sidebars

I need the aside to be positioned on the right side and the section on the left side, both centered in the space. Feel free to check out this link <!DOCTYPE html> <html> <head> <style> #main { width: 800px; margin: 0 auto; } ...

javascripthtmlcsstwitter-bootstrapvisual-studio-2013

What is the best way to include two class names within a single div using Next.js?

Struggling to include two different CSS classes into a single div element, I encountered some issues. For reference, here is a screenshot: https://i.stack.imgur.com/UuCBV.png https://i.stack.imgur.com/sHNwq.png My code snippet looks like this: blog.js ...

javascriptcssreactjsnext.js

HTML two-row horizontal list with truncation

My dilemma involves a horizontal list of items that expand the full width of their container and wrap onto the next line. However, I only want to show two lines of items initially, with a "show more" link to reveal additional rows in increments of two unti ...

javascripthtmljquerycss

State sub-arrays can be manipulated using the Array.splice method

This is a description of my React component. Initially, I set the state's rooms in the componentWillReceiveProps method. Upon submission, I update the rooms to match the data in the state as well. During submission, an API call is made by passing a s ...

javascriptreactjs

Maintain visibility of the thead in Semantic UI while scrolling through tbody

I am currently in the process of trying to keep the table header visible while scrolling. Are there any options within semantic ui that can help with this, or am I required to find a non-semantic ui solution? To view the table correctly, it is recommended ...

htmlcsssemantic-ui

Utilizing useState for React Data Picker

I recently attempted to implement the React Data Picker in my React project using npmjs. However, I encountered an issue when trying to import useState from import React, { useState } from "react"; The error message displayed: 'useState&a ...

cssreactjswebfrontendbackend

NodeJS encounters an error when attempting to query a collection in MongoDB containing 200,000 records totaling 1.3 gigabytes

Just starting out with NodeJS and Mongo DB. Currently, I have a collection containing 0.2 Million data (1.3 GB) in my Mongo Collection. I am running everything on my local server using a Windows machine. For querying this collection, I am utilizing NodeJ ...

node.jsreactjsmongodb

The left margin is malfunctioning

As a newcomer to css, I am struggling with adding margin-left to my paragraph and <h2>, and it's not taking effect. I have a 700px div and I want to add a 10px margin-left to both <p> and <h2> in relation to the image. Despite my e ...

htmlcss

What is the best way to set the screen height without needing to scroll vertically?

How can I make the orange and blue area extend to the end of the screen or have the full screen size minus the height of the navbar? When using `vh-100`, it fills the full height but creates a vertical scrollbar which is not desired. Is there a way in Boot ...

htmlcssbootstrap-4react-bootstrap

Using an outdated version of Node.js to set up a React App

Attempting to utilize Create React App but encountering an issue that demands Node 10 or above. Presently, my node version is Node 8.10.0 and unfortunately, I am unable to update the Node version as it's a work device. Is there a method to operate an ...

javascriptnode.jsreactjsnpmcreate-react-app

Guide on displaying a partial form as a horizontal form in Rails 4

I am facing an issue with displaying a form horizontally instead of vertically in a partial triggered by AJAX on my main page. I have tried various methods like using <form class="form-inline">, <%=f.number_field :pointsSpend, :class => "checkb ...

htmlcssruby-on-railsform-for

I am not enhancing the array's value; rather, I am substituting it

Hey everyone, I'm currently working on extracting an array of Sizes and Colors from an object. The goal is to trigger a handler, clickHandler(), when the input is clicked. However, each time the handler is invoked, the code ends up replacing the value ...

javascriptreactjsnext.js

Creating a React form input with an initial text value set

I am using input components from React Bootstrap and I need to set an initial value for the input component. However, I am having trouble achieving this as using defaultValue does not display any text in the input field. Can anyone please guide me on how t ...

javascriptreactjs

When props are passed through the root element, the data becomes inaccessible

I am currently using React in conjunction with an EJS template. I am attempting to pass data from an API to React, but I am facing difficulties in finding a way to accomplish this. Here is the API code snippet: module.exports.home_get = async (req,res) =&g ...

node.jsreactjsexpressejsreact-props

Exploring the concept of a State Tree within React JS

Recently, I started learning ReactJS and completed a few sections of my ReactJS courses. However, when I stumbled upon Redux and the concept of Single State Tree, I was intrigued. I am curious to understand what exactly a state tree represents in this co ...

reactjsreduxflux

The background color for individual table rows only shows up behind the text

I am facing an issue with highlighting a specific row in a table on a page created by an MVC 3 web application. The problem is that when I set the background-color for the tr tag, it only surrounds the text and not the whitespace between the cells. How c ...

htmlcssasp.net-mvc-3model-view-controller

Issue: Unable to apply styles using makeStyles to MUI Icon in React

I am trying to apply styles to mui Icons using the className attribute, but it seems like it's not working. However, when I use inline styles, everything works as expected. I have multiple Icons in my component that I want to style in the same way, so ...

reactjsmaterial-ui

Exploring Mathematical Functions Using React State Management

I'm trying to perform a mathematical operation with a value stored in a state that is extracted from an input. It seems like the input saves a numerical string in the state, but I'm struggling to convert it to an integer. Even using parseInt does ...

javascriptreactjsreact-hooks

What steps should be taken to prepare files (such as editing images) before they are uploaded to Google Drive using the `rpldy/drive-uploady` tool?

I have successfully implemented rpldy/drive-uploady to upload files to Google Drive. However, I would like to allow users to edit images before uploading them. How can I achieve this? Below is the code snippet: import DriveUploady from "drive-uploady ...

javascriptnode.jsreactjsnext.jsfile-upload